NextJS有单页应用模式吗？

Question

我有一个使用 React 和 NextJS 的项目。目前，我有一个自定义 _app.js 使页面成为 SSR。但现在我希望页面不在服务器端加载。有什么办法吗？

Answer 1

我们可以使用next.js动态导入(https://nextjs.org/docs/advanced-features/dynamic-import):

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'), { ssr: false })

你也可以这样写 HOC：

import React from 'react';

const isClient = () => typeof window !== 'undefined';

export const withClientRenderOnly = <P extends Record<string, unknown>>(
    WrappedComponent: React.ComponentType<P>
) => {
    const WrappedWithClientRenderOnly: React.FC<P> = props => {
        if (!isClient()) return null;

        return <WrappedComponent {...props} />;
    };

    return WrappedWithClientRenderOnly;
};

或创建简单的构图：

const ClientRenderOnly: React.FC = ({ children }) => {
    const [isMounted, setMounted] = useState(false);

    useEffect(() => setMounted(true), []);

    if(!isMounted) return null;

    return children;
};

const Page = () => <ClientRenderOnly>Page</ClientRenderOnly>

Answer 2

nextjs中有3种渲染Server side render，Server side generation和client side rendering。创建自定义 _app 不会使其成为 SSR。请查看那里的文件

Answer 3

所以你想用SSR构建SPA，对吧？我很困惑，因为你说你现在不想 server-side 渲染。如果你不想要 SSR，你为什么要使用 NextJs？，因为 NextJs 是为了 SSR

还有一点是自定义“_app.js”不会成为 SSR。以下是您可以使用自定义 APP

执行的功能

在页面更改之间保持布局
导航页面时保持状态
使用 componentDidCatch 自定义错误处理
将额外数据注入页面
添加全局CSS

(https://nextjs.org/docs/advanced-features/custom-app)

NextJS有单页应用模式吗？

Does NextJS have single page application mode?

single-page-application

reactjs

server-side-rendering

next.js