小能豆

ReactJS 服务器端渲染与客户端渲染

javascript

我刚刚开始研究 ReactJS,发现它提供了两种渲染页面的方式:服务器端和客户端。但是,我不明白如何将它们一起使用。这是构建应用程序的两种独立方式,还是可以将它们一起使用?

如果我们可以一起使用,该怎么做?我们需要在服务器端和客户端复制相同的元素吗?或者,我们是否可以在服务器上构建应用程序的静态部分,在客户端构建动态部分,而无需与已经预渲染的服务器端建立任何连接?


阅读 40

收藏
2024-06-05

共1个答案

小能豆

好问题!了解如何结合使用服务器端渲染 (SSR) 和客户端渲染 (CSR) 可以显著提高 React 应用程序的性能和用户体验。以下是帮助您了解如何有效结合 SSR 和 CSR 的细分。

服务器端渲染 (SSR) 与客户端渲染 (CSR)

  • 客户端渲染 (CSR):整个应用程序在浏览器中加载和渲染。首先,服务器发送一个带有 JavaScript 包的最小 HTML 文件。然后 JavaScript 接管并在浏览器中渲染应用程序。
  • 服务器端渲染 (SSR):服务器预渲染应用程序的初始 HTML 并将其发送到浏览器。然后浏览器接管以使页面具有交互性。

结合 SSR 和 CSR

在现代 Web 开发中,将 SSR 与 CSR 结合起来是一种常见做法。它通常的工作原理如下:

  1. 使用 SSR 进行初始渲染:当用户请求页面时,服务器会预渲染初始 HTML。这使用户几乎可以立即看到内容,从而提高感知性能和 SEO。
  2. Hydration:在浏览器中加载初始 HTML 后,React JavaScript 包(与 HTML 一起发送)将接管并“为”应用程序“补水”。Hydration 是 React 将事件侦听器附加到预渲染 HTML 的过程,使其具有交互性。

结合 SSR 和 CSR 的好处

  • 性能:由于用户看到预渲染的 HTML,因此初始加载时间更快。
  • SEO:搜索引擎可以更有效地索引预渲染的内容。
  • 交互性:一旦水化,应用程序就会变得具有完全交互性,并具有单页应用程序(SPA)的所有优点。

如何同时实施 SSR 和 CSR

要同时实现 SSR 和 CSR,通常使用 Next.js 之类的框架,这简化了组合这些渲染策略的过程。以下是使用 Next.js 的基本示例:

  1. 安装 Next.js

什复制代码npx create-next-app@latest my-ssr-csr-app cd my-ssr-csr-app

  1. 使用 SSR 创建页面

Next.js 使用基于文件的路由,你可以创建一个默认在服务器端呈现的页面。

```
jsx复制代码// pages/index.js
import React from ‘react’;

const Home = ({ data }) => {
return (


Server-Side Rendering with Next.js


{data}



);
};

// This function gets called at build time on server-side.
// It won’t be included in the browser bundle.
export async function getServerSideProps() {
// Fetch data from an API or database
const res = await fetch('https://api.example.com/data’);
const data = await res.json();

 // Pass data to the page via props
 return { props: { data } };

}

export default Home;
```

在此示例中,从getServerSideProps服务器上获取数据并将其Home作为 props 传递给组件。页面使用此数据在服务器上呈现并发送到客户端。

  1. 客户端的水合

Next.js 自动处理水合过程。当浏览器接收到 HTML 时,React 会接管并使页面具有交互性。

概括

通过使用 Next.js 之类的框架,您可以轻松地在 React 应用程序中结合服务器端渲染和客户端渲染。您无需手动复制服务器端和客户端上的元素。相反,您可以正常构建 React 组件,框架会处理初始服务器端渲染和后续客户端渲染。

这种方法具有初始加载时间快、SEO 改进等优点,同时还增强了客户端呈现的单页应用程序的交互性和用户体验。

2024-06-05