揭秘React SSR实战：构建高效全栈应用，一步掌握高性能渲染技巧

随着前端技术的发展，React已经成为构建现代Web应用的流行框架之一。而服务端渲染（SSR）则是在React中提升性能和SEO优化的重要手段。本文将深入探讨React SSR的实战技巧，帮助您构建高效的全栈应用。

一、React SSR概述

1.1 什么是React SSR？

服务端渲染（SSR）是一种在服务器上执行JavaScript代码并生成HTML的过程，然后将HTML发送到客户端。React SSR可以带来以下优势：

提高页面加载速度：由于HTML在服务器上生成，客户端只需下载必要的JavaScript代码，从而减少加载时间。
支持搜索引擎优化（SEO）：搜索引擎能够抓取SSR生成的HTML，提高网站在搜索引擎中的排名。

1.2 React SSR的工作原理

React SSR的工作原理主要分为两个阶段：

预渲染：服务器渲染React组件并生成HTML。
挂载：客户端加载JavaScript代码并挂载到页面上。

二、React SSR实战技巧

2.1 选择合适的SSR框架

目前，常见的React SSR框架有Next.js、Create React App等。本文以Next.js为例进行实战讲解。

2.2 创建Next.js项目

安装Next.js：

npx create-next-app@latest my-next-app cd my-next-app

创建一个React组件：

在pages目录下创建一个index.js文件，内容如下：

import React from 'react'; const Home = () => { return ( <div> <h1>Welcome to my Next.js app!</h1> </div> ); }; export default Home;

启动项目：

npm run dev

2.3 使用getServerSideProps进行数据获取

在pages/index.js中，使用getServerSideProps方法获取服务器端数据：

import React from 'react'; export async function getServerSideProps() { const res = await fetch('https://api.github.com/users'); const data = await res.json(); return { props: { users: data, }, }; } const Home = ({ users }) => { return ( <div> <h1>Welcome to my Next.js app!</h1> <ul> {users.map(user => ( <li key={user.login}>{user.login}</li> ))} </ul> </div> ); }; export default Home;

2.4 使用getStaticProps进行静态数据预渲染

对于不需要在每次请求时都获取数据的页面，可以使用getStaticProps进行静态数据预渲染。

在pages/index.js中，将getServerSideProps替换为getStaticProps：

import React from 'react'; export async function getStaticProps() { const res = await fetch('https://api.github.com/users'); const data = await res.json(); return { props: { users: data, }, }; } const Home = ({ users }) => { return ( <div> <h1>Welcome to my Next.js app!</h1> <ul> {users.map(user => ( <li key={user.login}>{user.login}</li> ))} </ul> </div> ); }; export default Home;

2.5 使用getStaticPaths进行页面路由预渲染

对于具有多个路由的页面，可以使用getStaticPaths进行页面路由预渲染。

创建pages/products/[id].js文件，并添加以下内容：

import React from 'react'; export async function getStaticPaths() { return { paths: [{ params: { id: '1' } }, { params: { id: '2' } }], fallback: false, }; } export async function getStaticProps({ params }) { const res = await fetch(`https://api.github.com/users/${params.id}`); const data = await res.json(); return { props: { user: data, }, }; } const Product = ({ user }) => { return ( <div> <h1>{user.login}</h1> </div> ); }; export default Product;

2.6 使用React 18并发模式

React 18引入了并发模式，可以优化应用性能，提高用户体验。

安装依赖：

npm install react-dom@18.0.0-rc.0

更新pages/_app.js：

import { Hydrate, unstable_concurrentFeatures } from 'react-dom/server'; import { AppProps } from 'next/app'; import '../styles/globals.css'; function MyApp({ Component, pageProps, ...rest }) { return ( <Hydrate {...rest}> <Component {...pageProps} /> </Hydrate> ); } export default MyApp;