react 服务端渲染框架_Next.JS | React服务器端渲染框架

react 服务端渲染框架

Next.js | react server side rendering Framework : As we all know that react is a very popular ui library for creating blazing fast web apps and even mobile apps .

Next.js | react服务器端渲染框架：众所周知，react是一个非常流行的ui库，用于创建快速的Web应用程序甚至移动应用程序。

服务器端渲染的好处 (The Benefits of Server-Side Rendering)

SEO might be the conversation that starts your team talking about server-side rendering, but it’s not the only potential benefit.

SEO可能是使您的团队开始谈论服务器端渲染的对话，但这并不是唯一的潜在好处。

Here’s the big one: server-side rendering displays pages faster. With server-side rendering, your server’s response to the browser is the HTML of your page that is ready to be rendered so the browser can start rendering without having to wait for all the JavaScript to be downloaded and executed. There’s no “white page” while the browser downloads and executes the JavaScript and other assets needed to render the page, which is what might happen in an entirely client-rendered React site.

这是最大的问题： 服务器端渲染可以更快地显示页面 。 通过服务器端渲染，服务器对浏览器的响应就是页面上准备渲染HTML，因此浏览器可以开始渲染，而不必等待所有JavaScript都被下载和执行。 当浏览器下载并执行呈现页面所需JavaScript和其他资源时，没有“白页”，这是在完全由客户端呈现的React网站中可能发生的情况。

And Next js is a perfect solution for creating react app which are rich in server side rendring capabilities .

而Next js是创建具有丰富服务器端渲染功能的react应用的理想解决方案。

In this article we will see some great stuff in nextjs

在本文中，我们将在nextjs中看到一些很棒的东西

For this article we will first create a nextjs starter project

对于本文，我们将首先创建一个nextjs入门项目

npx create-next-app sampleapp

now in the pages directory you will have index.js file which will serve as home route for your application and if you want more routes you can just create files and use them as route

现在在pages目录中，您将拥有index.js文件，该文件将用作您的应用程序的本地路由，如果您需要更多路由，则可以创建文件并将其用作路由

1. pages/index.js → localhost:3000
   pages / index.js→本地主机：3000
2. pages/about.js → localhost:3000/about
   pages / about.js→localhost：3000 / about

特殊页面 (Special Pages)

The first one is pages/_document.js, which allows us to define the surroundings of the page, such as the section. This could be useful to change the page title, add meta information or styles, and so on

第一个是pages / _document.js，它使我们能够定义页面的周围环境，例如部分。 这对于更改页面标题，添加元信息或样式等很有用。

// pages/_document.js
import Document, {Head, Main, NextScript} from 'next/document';
ex