Ciro Santilli @cirosantilli 34

 Incoming links: Server-side rendering

gothinkster/realworld  Updated 2024-12-15  +Created 1970-01-01

Ciro Santilli's implementation: node Express Sequelize Next.js realworld example app.

Basically puts together every backend with Front-end web framework to create the exact same website.

The reference live demo can be found at: demo.realworld.io/#/ It is based on Angular.js as it links to: github.com/gothinkster/angularjs-realworld-example-app TODO backend?

There are however also live demos of other frontends, e.g.:

React: react-redux.realworld.io. But note that tag addition at post creation is broken there as of March 2021, but not on master: github.com/gothinkster/react-redux-realworld-example-app/issues/151#issuecomment-808417846 so they forgot to update the live server.
Vue.js: vue-vuex-realworld.netlify.app

Note that all those frontends communicate with the same backend.

As of 2021 Devs are seemed a bit too focused on monetizing the project through their "how to use this project" premium tutorial, and documentation could be better: just getting the hello world of the most popular backend with the most popular frontend is not easy... come on.

github.com/gothinkster/realworld/issues/578 asks for community support, as devs have moved on since unfortunately.

Remember:

by default, the frontends hardcode the upstream public data API: https://conduit.productionready.io/api so you have to hack their code to match the port of the backend. And each backend can have a different port.
when you switch between backends, you must first manually clear client-side storage cookies/local new run will fail due to authentication issues!

Important missing things from the minimum base app:

server-side rendering:
- github.com/arrlancore/nextjs-ssr-real-world-app-example. As advertised, that global instance does render with JavaScript disabled! Proposed for upstream at: github.com/gothinkster/realworld/issues/423
- github.com/gothinkster/realworld/issues/266
no javaScript bi-directional communication library built-in... come on: github.com/gothinkster/realworld/issues/107
email notifications however as tested on the live demo: demo.realworld.io/#/
error handling is broken/missing/inconsistent across apps

First you should the most popular backend/frontend combination running, which is the most likely to be working. We managed to run on Ubuntu 20.10, React + Node.js Express.js as described at github.com/gothinkster/node-express-realworld-example-app/pull/116:

github.com/cirosantilli/node-express-realworld-example-app/tree/mongo4 which has a simple patch on top of github.com/gothinkster/node-express-realworld-example-app/tree/ba04b70c31af81ca7935096740a6e083563b3a4a for MongoDB 4 support
This requires you to first install MongoDB on Ubuntu and ensure you can login to it from the command line.

github.com/gothinkster/react-redux-realworld-example-app/tree/9186292054dc37567e707602a15a0884d6bdae35 patched to use the correct server host/port localhost:3000:

diff --git a/src/agent.js b/src/agent.js
index adfbd72..e3cdc7f 100644
--- a/src/agent.js
+++ b/src/agent.js
@@ -3,7 +3,7 @@ import _superagent from 'superagent';

 const superagent = superagentPromise(_superagent, global.Promise);

-const API_ROOT = 'https://conduit.productionready.io/api';
+const API_ROOT = 'http://localhost:3030/api';

 const encode = encodeURIComponent;
 const responseBody = res => res.body;

Then just:

npm install
npm start

on both server and client, and then visit the client URL: localhost:4100/

You have to hit the Enter key to add tags, it's terrible: github.com/gothinkster/react-redux-realworld-example-app/issues/151#issuecomment-808417846

One cool thing is that the main repo has unified backend API tests:

git clone https://github.com/gothinkster/realworld
cd realworld
git checkout e7adc6b06b459e578d7d4a6738c1c050598ba431
cd api
APIURL=http://localhost:3000/api USERNAME="u$(date +%s)" ./run-api-tests.sh

so the per-repository tests are basically useless, and that single test can test everything for any backend! There is no frontend testing however: github.com/gothinkster/realworld/issues/269 so newb.

 Read the full article

Next.js  Updated 2024-12-15  +Created 1970-01-01

 View more

Framework built on top of React.

Officially recommended by React ^[ref]:

Recommended Toolchains
If you’re building a server-rendered website with Node.js, try Next.js.

gothinkster/realworld blog example by Ciro Santilli: node Express Sequelize Next.js realworld example app.

Basically what this does is to get server-side rendering just working by React, including hydration, which is a good thing.

Next.js sends the first pre-rendered HTML page along with the JavaScript code. Then, JavaScript page switches just load the API data.

Next.js does this nicely by forcing you to provide page data in a serialized JSON format, even when rendering server-side (e.g. the return value of getServerSideProps). This way, it is also able to provide either the full HTML, or just the JSON.

Some general downsides:

it does feel like they don't document deployment very well however, especially non-Vercel options, which is the company behind Next.js. I'm unable to find how to use a non Vercel CDN with ISR supposing that is possible.
Next.js is very opinionated, and like any opinionated library it is sometimes hard to know why something is/isn't happening, and sometimes it is hard/impossible to do what you want with it unless they add support. They have done good progress, but even as of 2022, some aspects just feel so immature, some major-looking use cases are not very well done.

In theory, Next.js could be the "ultimate frontend framework". It does have a lot of development difficulties that need to be ironed out, but the general concepts, and things it tries to integrate, including e.g. webpack, TypeScript, etc. are good. Maybe the question is when will someone put it together with an amazing backend library and dominate and finally put an end to the infinite number of Js Frameworks!

In-tree examples at: github.com/vercel/next.js/tree/canary/examples

canary is their master: github.com/vercel/next.js/issues/3211

In order to offer its amazing features, Next.js is also extremely opinionated, which means that if something wasn't designed to be possible, it basically isn't.

No prerender with custom server? It forces you to write your API with next as well? Or does it mean something else?

TODO can it statically generate pages that are created at runtime? E.g. if I create a new blog post, will it automatically upload a static page? It seems that yes, and that this is exactly what Incremental Static Regeneration means:

However, Ciro can't find any mention of how to specify where the pages are uploaded to... this is pat of the non-Vercel deployment problem.

Can't ISR prerenter by URL query parameters:

That plus the requirement to have one page per file under pages/ leads to a lot of useless duplication, because then you are forced to place the URL parameters on the pathnames.

"Module not found: Can't resolve 'fs'" Hell. The main reason this happens seems to be the that in a higher order component, webpack can't determine if callbacks use the require or not to remove it from frontend code. Fully investigated and solved at:

stackoverflow.com/questions/64926174/module-not-found-cant-resolve-fs-in-next-js-application/70363153#70363153

Overviews:

www.reddit.com/r/reactjs/comments/8evy5d/what_are_the_downsides_to_nextjs/ 2017 What are the downsides to Next.js?

TODO answer:

stackoverflow.com/questions/59674496/how-to-pass-pageprops-in-next-js-from-a-child-component-to-app-js

 Read the full article

React  Updated 2024-12-15  +Created 1970-01-01

 View more

Website: reactjs.org

React officially recommends that you use Next.js ^[ref], so just do it. It just sets up obvious missing functionality from raw React.

React feels like a good. But it also feels impossible to use/learn sometimes.

Its main design goal is to reduce DOM changes to improve rendering times.

And an important side effect of that is that it becomes easier to do stuff of the type:

user creates a new comment that appears on screen without page reload
comment has a delete button, which is JavaScript callback activated

and then the new comment easily gets the callback attached to it.

And it also ends up naturally doubling as a template engine.

But React can also be extremely hard to use. It can be very hard to know what you can and cannot do sometimes, then you have to stop and try to understand how react works things better:

cannot update a component while rendering a different component warning in React
Rendered more hooks than during the previous render.
cannot use hooks from helpers:

The biggest problem is that it is hard to automatically detect such errors, but perhaps this is the same for other frontend stuff. Though when doing server-side rendering, the setup should really tell you about such errors, so you don't just discover them in production later on.

Is is also very difficult to understand precisely why hooks run a certain number of times.

Examples under: react.

react/hello.html
react/hello-func.html: Hello World with a React function component instead of classes. At page load console shows:
```
Main
```
and then after each click:
```
onClick
Main
```
so we understand that Main insanely functions both as the constructor and as the render function in React function components.
react/hello-func-use-callback.html: same as react/hello-func.html but with useCallback. TODO no advantages in this case? When does it help?
react/hello-without-jsx.html: Hello World in pure JavaScript, without JSX. Exactly equivalent to react/hello.html. Documented at: reactjs.org/docs/react-without-jsx.html Understanding this is fundamental to understanding React.
react/prop-change.html: shows what gets called as parameters flow down through the tree.
By looking at the console, we see all render get called every time, even if props didn't change, but not the constructors.
After page load the console contains:
```
Main.constructor
Main.render
NotMain.constructor
NotMain.render
NotMain2.constructor
NotMain2.render
```
Then, every time we click the button it adds:
```
handleClick
Main.render
NotMain.render
NotMain2.render
```
Note how the props of NotMain only change every other click, but render still gets called every time.
In order to make React not re-render when there are not changes, you have to either:
- define the shouldComponentUpdate method of class components
- wrap functional components in React.memo
Related:
- stackoverflow.com/questions/61301937/why-is-react-component-rerendering-when-props-has-not-changed
- stackoverflow.com/questions/67214500/why-react-rerendres-components-even-if-props-didnt-changed
react/prop-change-hook.html: same as react/prop-change.html, but using hooks. The notable difference is that functional components don't have a clear constructor/render separation, the function just gets called every time. Then React does some magic to ensure that useState returns the current state, except for the first render where they return the initial value.
react/prop-change-hook-use-memo.html: TODO forgot if this example is useful, was tring to use useMemo
react/prop-change-child.html: shows what child prop changes do not call render on parent, Main does not show up on console when you click under NotMain
react/hook-from-function-fail.html: TODO got some errors that seemed linked to this on a larger program, but failed to minimize them here
react/hook-different-number-of-times.html: this illustrates one of the cardinal points of using hooks: you must always call them the same number of times, otherwise it fails with:
React has detected a change in the order of Hooks called by Main. This will lead to bugs and errors if not fixed.
In the case of useState, we can kind of understand why this happens: React must use the order of calls to determine which state variable to return at each point in time.
react/hello-hook-use-effect.html: just checking when it gets called. Happens after every render
```
handleClick
Main
useEffect
useEffect2
```
TODO create a test \a[react/img-broken.html]
- stackoverflow.com/questions/34097560/react-js-replace-img-src-onerror
- stackoverflow.com/questions/36305805/how-to-hide-alt-text-using-css-when-the-image-is-not-present