• 「React」RSC 服务端组件


    前言

    RSC(React Server Components)是React框架的一个新特性,它允许开发者编写只在服务器端渲染的组件。与传统的服务器端渲染(SSR)不同,RSC的目标是提升性能和用户体验,同时减少客户端加载的JavaScript代码的体积。
    在这里插入图片描述

    使用示例

    如何在一个项目中使用React Server Components和客户端组件协同工作:

    服务端组件示例 (UserList.server.js)

    这个服务端组件负责从服务器获取用户列表,并将其渲染成无状态的HTML。

    // UserList.server.js
    import React from 'react';
    import { fetchUserList } from './api';
    
    function UserList() {
      const users = fetchUserList(); // 假设这是服务器端的数据获取函数
      return (
        
      {users.map(user => (
    • {user.name}
    • ))}
    ); } export default UserList;

    客户端组件示例 (UserPage.client.js)

    客户端组件包含状态和交互逻辑。例如,在此例中,组件响应用户的点击事件。

    // UserPage.client.js
    import React, { useState } from 'react';
    import UserDetails from './UserDetails.client';
    import UserList from './UserList.server';
    
    function UserPage() {
      const [selectedUserId, setSelectedUserId] = useState(null);
    
      const handleUserClick = (userId) => {
        setSelectedUserId(userId);
      };
    
      return (
        
    {selectedUserId && }
    ); } export default UserPage;

    在这个简单的场景中,UserPage.client.js 能够导入并且利用UserList.server.js,即使UserList是在服务器上渲染的。UserPage还管理着用户的选择状态,并根据该状态显示UserDetails组件。

    好处

    • 数据获取快,可以直接在Node端读取数据,塞给组件
    • 更安全,比如密钥等等不方便暴露给客户端
    • 服务器组件生成结果可缓存
    • 减少JS bundle包大小,服务器组件在客户端无需打包进JS
    • 更快的FCP
    • Streaming优化,html页面实际上是可以分为多个chunk输出给用户的
  • 相关阅读:
    手把手教你搭建ELK-新手必看-第六章:搭建filebeat
    代理IP与Socks5代理:跨界电商智能爬虫的引擎与安全壁垒
    网格搜索和交叉验证
    关于YAML配置
    字节跳动Java端研发面试,P8大佬亲自讲解
    【C++11】多线程
    深度之眼(三)——矩阵的行列式
    sqllab第十七关通关笔记
    【C#语言】DataGridView删除行
    C/C++教程 从入门到精通《第二十五章》——Linux系统入门
  • 原文地址:https://blog.csdn.net/Constantiny/article/details/139554704