From 8f0693d82be5836874ecf74898e7ebefe9abcbea Mon Sep 17 00:00:00 2001 From: Sergey Aleksandrov Date: Thu, 14 Jan 2021 06:51:42 +0200 Subject: [PATCH] update --- README.md | 46 ++++++++++++++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 6d1c0d2..48fd4a1 100644 --- a/README.md +++ b/README.md @@ -4,16 +4,28 @@ The easiest way to switch your React application to Server Side Rendering. +## Table of Contents + +- [Articles](#articles) +- [Features](#features) +- [Getting Started](#getting-started) +- [SSR](#ssr) +- [Problems](#problems) +- [Motivation](#motivation) +- [Using](#using) +- [License](#the-mit-license) + ## Articles ## Features + +- **iSSR** supports native setState, Redux (thunk, sagas), Mobx, Apollo and other state management libraries - TypeScript support -- Extremely small size (5kb) +- Small size (5kb) - No dependencies -- **iSSR** supports native setState, Redux (thunk, sagas), Mobx, Apollo and other state management libraries - ## Getting Started + Modern JS applications are divided into 2 types: - CSR - *Client-Side rendering*. The application will be displayed only after downloading and executing all the necessary JS code. Until then, the user will see a blank page. It degrades the UX and is bad for SEO. - SSR - *Server-Side rendering*. The auxiliary server doesn't send a blank page, but a page with data. Thus, the user can immediately start working with the application, and search engine bots will index the page. @@ -39,6 +51,7 @@ The second problem is hydration. A process that allows us to associate the recei **iSSR** handles asynchronous operations and synchronizes state on the client. ## Motivation + React currently has many solutions for building SSR applications. The most popular solution is **Next.JS**. This is a great framework with many possibilities, iSSR cannot replace it. But, **Next.JS** requires rewriting your existing application completely. **Next.JS** is a framework, which means you have to use its approaches. **iSSR** is just a small library that handles side effects and synchronizes state. - You can very quickly migrate your existing application to SSR using **iSSR** without major changes. - You can use any build system. @@ -50,6 +63,7 @@ React currently has many solutions for building SSR applications. The most popul The simplest example of an SSR application using an asynchronous function via setState ### Example: + Here is a simple Todo List Application without SSR. It uses *jsonplaceholder* for mocking the data: ```jsx @@ -91,28 +105,26 @@ It's very simple, when we open the application it will load the todo list data f **Let's change this app to SSR:** -1. Installation: +**Step 1**. Installation: ```sh -# NPM npm install @issr/core --save npm install @issr/babel-plugin --save-dev ``` Basic webpack configuration for SSR: + ```sh -# NPM npm install @babel/core @babel/preset-react babel-loader webpack webpack-cli nodemon-webpack-plugin --save-dev ``` *For this example we should install node-fetch because native **fetch** does not support **node.js**. Also, for the server we will use express, but you can use any module* ```sh -# NPM npm install node-fetch express --save ``` -2. Make *webpack.config.js* in the root of project +**Step 2**. Make *webpack.config.js* in the root of project ```js const path = require('path'); @@ -173,9 +185,10 @@ module.exports = [ } ]; ``` + The main goal is to create 2 applications **client** and **server** with common logic. -3. Let's separate the general logic from rendering. Let's create **App.jsx**, and take out the common part for both Frontend and Backend: +**Step 3**. Let's separate the general logic from rendering. Let's create **App.jsx**, and take out the common part for both Frontend and Backend: ```jsx import React from 'react'; @@ -214,7 +227,7 @@ In this code, *getTodos* is an asynchronous operation that makes call to the *js - *useSsrEffect* is analogue useEffect (() => {}, []); for SSR. It works with any async logic. -4. **client.jsx** should contain part of the application for Frontend +**Step 4**. **client.jsx** should contain part of the application for Frontend ```jsx import React from 'react'; @@ -233,12 +246,14 @@ hydrate( ``` The code: + ```js const SSR = createSsr(window.SSR_DATA); ``` + Associates the state executed on the server with the application on the client side. For correct work *useSsrState* on the client -5. **server.jsx** should contain the logic of the NodeJS application, it is convenient to use the koa/express framework or similar for this: +**Step 5**. **server.jsx** should contain the logic of the NodeJS application, it is convenient to use the koa/express framework or similar for this: ```jsx import React from 'react'; @@ -276,14 +291,15 @@ app.listen(4000, () => { console.log('Example app listening on port 4000!'); }); ``` + There are 2 important points in this code: -5.1 + ```js app.use(express.static('public')); ``` + The server should serve the folder where frontend part of application is built. -5.2 ```html