如何为NextJS组件实现服务器端渲染(SSR)

Question

我想为NextJS Typescript组件实现Server Sider Rending SSR。使用getServerSideProps可以对页面进行SSR，但对于非页面子组件没有找到任何方法。它在页面文件夹下工作得很好，但在页面组件之外就没有运气了。

假设我已经在components文件夹下创建了一个带有API的组件，这里getServerSideProps不工作，甚至SSR也不工作。并且在页面视图源DOM中看不到内容。

/components/user.tsx

import React from 'react';
import {useEffect,useState} from 'react';
interface User {
id:number;
name: string;
username: string;
email:string;
}

const Users = () => {
const [data,setData]= useState([])
useEffect(()=>{
fetch("https://jsonplaceholder.typicode.com/users").then((result)=>{
result.json().then((resp)=>{
setData(resp);
})
})
},[])
console.log(data)
return (
<div>
<ul>
{data.map((data: User)=>
<li key={data.id}>
<h2>{data.name}</h2>
<h3>{data.username}</h3>
<h4>{data.email}</h4>
</li>
)}
</ul>
</div>
)
}
export default Users

/pages/user.tsx

import React from 'react';
import Users from "../components/Users";
function user() {
return (
<section>
<h1>User - Component</h1>      
<main>
<Users />
</main>   

</section>
);
};
export default user;

你能帮助如何为位于页面文件夹外侧的组件实现SSR吗？

Answer 1

如文档中所述

getServerSideProps只能从页面导出。您无法从非页面文件导出它。

这排除了getServerSideProps，现在用于请求本身

两种选择

1. 设置相应的pages/component页面
2. 设置一个自定义服务器，并在next.config.js中使用以下内容-这允许路由在您身上，而不使用pages作为唯一的服务地点

module.exports = {
useFileSystemPublicRoutes: false,
}