preface

To tell the truth, I personally still feel that the writing is getting better and better, the previous articles are a problem boring to the dark, the article is a little messy because the article is too large to lead to not one go, the train of thought is sometimes very chaotic. So I’m going to start writing a series of articles, haha, give it a try.

The advantage of the series is to speak a point at a time, and try to speak more detailed, I hope you can give me more advice ~

Next. Js Step pit introduction series

  • (1) Hello Next
  • (2) Add Antd && CSS
  • (3) Directory reconstruction && Talk about routing again
  • (4) Next. Js mid-term fill pit
  • (5) Introduce state management Redux
  • (6) Reconstruct the directory again
  • (7) Other relevant knowledge

The author of the small white technology stack is mainly react, the whole family in the bucket react, react-router, redux and so on almost used, recently want to tackle the server rendering (SSR), mentioned the server rendering, a lot of cumbersome Webpack configuration, back-end routing configuration and so on make my head big, annoying. I don’t like contact new things, everyone can learn in a different way, I will like to use a thing, see to study the principle of it, so, do you have any similar to a key configuration or fool type configuration server rendering framework scaffolding, grasp the concept, the baidu is — Next. Js.

I like the create-React-app scaffold very much, but it is officially not supported at the moment, so I have to give it up. In fact, it can be configured, but I will get one working first, and then I will fill it in later

Server-side rendering

On the server side rendering first, at present the project is, indeed, the service side rendering, but not I, personally, I write some things are not the server rendered, so the following conclusion is after summarizing a lot of article, specific articles below, in the knowledge is used to share learning, learned is I ~ ha ha

Client rendering

In the original front end, the page is rendered after the browser has acquired the JavaScript and CSS files, completely on the client side (i.e., the browser), and the routing is client-side routing, which is what most SPA single-page applications are today.

Server-side rendering

After the page is rendered by the server, the HTML page is returned directly to the front end, and the URL changes will refresh the whole page, which is the previous PHP and JSP mode

homogeneous

High-end point of the word Universal APP, why iso-structure, because the client rendering has a disadvantage, is the first screen loading too large files or too many files will become very slow, so you can put the first screen on the server to render to improve the speed of the first screen, the first screen loading after the road began to be given to the client control, and turned into SPA application, The entire code is written in JavaScript, with nodeJS on the server.

Next.js

About Next. Js, I will not BB, I write this article at the same time is my first contact with Next. Js so it is called the pit entry, you are interested in can go to the official website to learn, it is quite detailed -> Next

Create a new Nextjs application

We all know that the introduction series is Hello World, here I think next. Js is quite friendly, because it really eliminates the miscellaneous configuration of server rendering that we usually understand, and only needs a few simple steps to create a Universal App.

The first step is to install dependencies

All you need to do is create a new folder and run the following command

// Initialize the application yarn init // Install the three dependencies yarn add react react-dom next // package.json configuration start {... // Select "script": {"dev": "next"}... }Copy the code

OK, you’ve finished building the server based on next, isn’t it really easy? Next let’s run yarn dev.

what? By default, Next. Js takes pages from the Pages directory for rendering and returns them to the front end for display. By default, it takes pages/index.js as the home page of the system for display. Therefore, we need to create a pages directory. Then try it again.

Step 2 Create the Pages folder and file

Since 3000 is often used by another project, I changed the boot port to 3006, and changed the script boot mode to 3006:

"script": {
    "dev": "next -p 3006"
}
Copy the code

Then we go to http://localhost:3006:

Ok, got a very concise page, reasonable, I like this concise page. The default root directory is index.js, so let’s create an index.js directory.

Const Home = () => (<h1> </h1>); export default Home;Copy the code

Ok, that’s fine now. Since nex.js turns on server-side rendering by default, we don’t need to do any configuration, so this extremely simple application is now a Universal React APP. We can also see from the page elements:

Step 3: Next route

See here, novice friends should be like me exclamation Next. Js powerful at the same time there will be a question, wait a minute, how to render? Route you did not configure with what the home page, general SPA at least will configure the route to the page jump, here did not configure the route home page out I have other pages, how to do? By default, nex.js matches index.js in the pages directory as the root/path, and the rest of the paths do the same. Instead of react-router, our react-router routes rely on the routes that are encapsulated by next. Js (redux, too, more on that later).

/pages/index.js ----> / import React, {Fragment} from 'React '; import Link from 'next/link'; < span style =' box-width: border-box; line-height: 22px; font-size: 13px! Important; word-break: inherit! Important; "> < span style =' box-width: border-box; export default Home;Copy the code
/pages/ userlist.js ----> /userList const userList = () => (<h2> </h2>); export default UserList;Copy the code

It’s amazing, not only did the jump succeed, but the corresponding history was also encapsulated for us, and the back step was normal. As you can see, we don’t need to configure any route on the front-end or node side, we just need to write according to its template. And the front page of the jump is also no refresh ~

But radish cabbage each has his own love, although personally feel very powerful but can not see the route or feel strange, and the writing method has also changed, that is, the route must be in the Pages path can, so the project after will not be very confusing, and the page and route fusion together redux how to do, feel very bloated ah, As a person who just passed over from pure front end SPA, it must be very awkward. I think it is impossible to be so low, certainly not. I will explore later.

The code address

Refer to the article

Server-side rendering with Universal React App D2 – Build a highly reliable and high-performance React isomorphic solution

QQ Group: 641113448 (Note: Nex.js)