NextJS是在服务器上还是在浏览器上运行页面和组件，还是两者都在？

tf7tbtn2 于 2023-03-02 发布在其他

关注(0)|答案(2)|浏览(166)

我有一个页面没有找到

function MyPage({ props }) {
    console.log('page')
    return (<>
        <MyComponent />
    </>)
}

以及一个部件...

export function MyComponent() {
    console.log('component')
    return (
        <>
            
        </>
    );
}

当我运行Yarn开发并浏览到http：//localhost：3000时
我在终端和浏览器控制台窗口中都看到了以下日志...

page
component

这是没有意义的。服务器页面不应该呈现在浏览器上。组件也不应该呈现在服务器上。
所以我的问题是...
1.这是怎么回事？
1.我如何确定一个组件/页面是服务器的"东西"还是动态组件？（我好像搞错了）

next.js

来源：https://stackoverflow.com/questions/75605351/is-nextjs-running-pages-and-components-on-server-or-browser-or-both

2条答案

按热度按时间

mwngjboj1#

我觉得你可以用

typeof window === 'undefined'

您可以在here上找到说明
例如，

if (typeof window === 'undefined') {
    // Only run on server
}

if (typeof window !== 'undefined') {
    // Only run in browser
}

赞(0）回复(0）举报 2023-03-02

bmp9r5qi2#

这两个都是客户端渲染，对于服务器端渲染，需要使用getServerSideProps
此函数生成的props在服务器端进行管理和计算，然后返回到浏览器，在getServerSideProps中添加的控制台日志在浏览器中不可见。
例如：

function Page({ data }) {
  // Render data...
}

export async function getServerSideProps() {

  const res = await fetch(`https://.../data`)
  const data = await res.json()

  console.log("SSR component")
  return { props: { data } }
}

export default Page

赞(0）回复(0）举报 2023-03-02

我来回答

NextJS是在服务器上还是在浏览器上运行页面和组件，还是两者都在？

2条答案

相关问题

热门标签

最新问答