Perfect combo Next & Redux-Saga

Hi there! I want to share my experience of implementing an interesting strategy developing a SPA (Single Page Application) application with SSR (Server-Side Rendering). I should inform you that the article is focused on software developers with basic knowledge. Everything described below practically works on several projects in real life. Please enjoy the article 😉

If you consider React stack to create a relatively complex application, then in most cases it is smart to use a state management library. The best choice here is Redux. Although it is around since 2015, it's still gaining popularity. Moreover, the library is mandatory in most vacancies related to React. Even the new React context API has not changed it's position. Okay, we have a state management library.

Async actions

Next our step is to cope with async actions. Usually, these are requests to the server or user's actions. There are 2 good options: redux-thunk and redux-saga. In my opinion thunk is suitable for simple applications. As for saga, it is a solution that not only solves the problem of async actions but also the problem of business logic in the components. In my opinion, the second problem, is no less important than the first. Therefore, I consider redux-saga the best library for managing async actions in applications, using React and Redux libraries.

So, I would call the selected React & Redux & Redux-Saga stack ideal, manna from heaven for modern UI development. However, the article is not about these libraries. There is a lot of information about them on the Internet. I recommend researching them and use in future projects. If you don't have required knowledge, then the next part will be more difficult for you, but still useful.

Server-Side Rendering

Even with the perfect technology stack, we also get a fairly common problem. Many developers have difficulties because they did not solve this problem at the start of the project. What is it? SEO (Search Engine Optimization)! This is a search engine optimization for your website. Yes, this is not always necessary, but it often plays a crucial role. What does it take for SEO to work well? It's simple - SSR.

SSR solves the problem with SEO. Although Google crawler (Googlebot) already seems to be able to work with SPA applications, but in practice it is not quite so. Search engine optimization works better with SSR than with browser rendering. It is a fact.

SSR has other advantages. For example, faster initial render and transfer the load to the server. So, we need to choose a framework. In fact, the choice is small. Next.js! This is the best solution that is used by many companies.

Implementation

Note that normal saga flow is not covered in this article. We are interested in Redux store implementation with SSR. To set up saga flow at client use official tutorial Redux-Saga. So, we need next-redux-wrapper library. It automatically creates the store instances for you and makes sure they all have the same state. Follow the link to find a detailed library's API and more scenarios.

1. Create root saga, then implement the store creator

2. Wrap root component _app.js with HOC from the first step

3. Dispatch needed actions, then stop saga on server

4. Add HYDRATE handler to reducers. It properly reconciles the hydrated state on top of the existing state

5. That's all. Now you can retrieve data from the Redux store anywhere, whether on the server or client-side

If my story helped you, you found a mistake or want to suggest an improvement, please feel free to drop me a message. My contacts are on the top of the page 😉