NextJS 中的 SSR 是什么？

Next Js 是一个基于 React 的框架，它为开发人员提供了生产级应用程序所需的一切。

SSR或服务器端渲染也称为动态渲染。在 SSR 中 每次服务器收到请求时都会生成该页面。必须针对特定类型的请求更改数据的页面，这些页面使用 SSR 因为每个请求的数据都不相同，并且可能会有所不同。要将 SSR 用于页面，我们需要导出一个名为“ getServerSideProps ”的异步函数。每次对页面发出请求时都会调用此异步函数。

句法：

export default function Page( {data} ){
   return <>YOU CAN DISPLAY YOUR DATA ACCORDINGLY
}
export async function getServerSideProps() {
   // Your code
   const data = .... ;
   
   // Passing data to the Page using props
   return {
       props : {data}
   }
}

注意：您可以使用变量的任何其他名称代替数据。此外，您可以通过用逗号“ ， ”分隔多个道具来传递它们。

下面是分步实现：

第 1 步：创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

项目结构：所以，现在我们有一个名为my-awesome-app的 Next Js 应用程序，其目录结构如下图所示：

目录结构

第 1 步：因此，让我们通过在“pages”文件夹中创建“users.js”，然后从虚拟 API 获取用户，然后在该端点中显示该数据来创建一个端点为“/users”的页面。

使用的虚拟 api：

https://jsonplaceholder.typicode.com/users

创建一个 users.js 文件。

创建“users.js”文件

第 2 步：将以下代码添加到“pages/users.js”文件中：

users.js

// Inside "pages/users.js"
export default function Users( {data} ){
    return (
        

            
List of Users
            

                {data.map((user,index)=>{
                 return 
Id : {user.id} , 
                     Name : {user.name} , Email : {user.email}
                 
   
                })}
            
        
    )
}
  
export async function getServerSideProps() {
      
    // Fetching data
    const res = await fetch(
    'https://jsonplaceholder.typicode.com/users');
    const data = await res.json() ;
  
    // Passing data to the Product Page using props
    return {
        props : {data}
    }
}

运行应用程序的步骤：使用给定的 2 个命令之一启动开发服务器：

npm run dev

要么

yarn run dev

输出：现在去“http://localhost:3000/users”获取输出。

上述代码的输出