My approach to SSR and useEffect - discussion | kspr.dev

For the last few days, I was developing my personal website. I felt it needed some refreshment and as always it is a great occasion to play with something new. I've decided it will be written in React with SSR.

I've put all data fetching in useEffect hook - pretty standard approach. However, useEffect does not play very well with server-side rendering. I've managed to work this out by creating custom hook useSSE - "use server-side effect" and I've created an npm package from it.

I am very curious about your opinion. Here is the package on npm and GitHub repo: kmoskwiak/useSSE.

And here is an example on CodeSandbox.

And this is how it works...

Instead of using useEffect for data fetching, I use useSSE. It looks like a combination of useState and useEffect. Here is an example:

1const MyComponent = () => {
2  const [data] = useSSE(
3    {},
4    "my_article",
5    () => {
6      return fetch('http://articles-api.example.com').then((res) => res.json());
7    },
8    []
9  );
10
11  return (
12    <div>{data.title}</div>
13  )
14}

useSSE takes 4 arguments:

an initial state (like in useState)
a unique key - a global store will be created, and data will be kept under this key,
effect function returning promise which resolves to data,
array of dependencies (like in useEffect)

The essence of this approach is to render application twice on server. During first render all effect functions used in useSSE hook will be registered and executed. Then server waits for all effects to finish and renders the application for the second time. However, this time all data will be available in global context. useSSE will take it from context and return in [data] variable.

This is how it looks on server-side. The code below shows a part of expressjs app where the request is handled.

1app.use("/", async (req, res) => {
2  // Create context
3  // ServerDataContext is a context provider component
4    const { ServerDataContext, resolveData } = createServerContext();
5
6  // Render application for the first time
7  // renderToString is part of react-dom/server
8    renderToString(
9        <ServerDataContext> 
10            <App />
11        </ServerDataContext>
12    );
13
14  // Wait for all effects to resolve
15    const data = await resolveData();
16
17  // My HTML is splited in 3 parts
18    res.write(pagePart[0]);
19
20  // This will put <script> tag with global variable containing all fetched data
21  // This is necessary for the hydrate phase on client side
22    res.write(data.toHtml());
23
24    res.write(pagePart[1]);
25
26  // Render application for the second time. 
27  // This time take the html and stream it to browser
28  // renderToNodeStream is part of react-dom/server
29    const htmlStream = renderToNodeStream(
30        <ServerDataContext>
31            <App/>
32        </ServerDataContext>
33    );
34
35    htmlStream.pipe(res, { end: false });
36    htmlStream.on("end", () => {
37        res.write(pagePart[2]);
38        res.end();
39    });
40});

On client-side application must be wrapped in provider as well. A custom context provider is prepared for this job. It will read data from global variable (it was injected by this part of code: res.write(data.toHtml())).

1const BroswerDataContext = createBroswerContext();
2
3hydrate(
4    <BroswerDataContext>
5        <App />
6    </BroswerDataContext>,
7    document.getElementById("app")
8);

That's it! What do you think about this approach? Is useSSE something you would use in your project?

Here are all resources: