在 Web 应用程序上，我想显示两种不同的菜单，一种用于移动设备，一种用于桌面浏览器。我将 Next.js 应用程序与服务器端渲染和库react-device-detect 一起使用。
import Link from "next/link";
import { BrowserView, MobileView } from "react-device-detect";
export default () => (
<div>
Hello World.{" "}
<Link href="/about">
<a>About</a>
</Link>
<BrowserView>
<h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
<h1> This is rendered only on mobile </h1>
</MobileView>
</div>
);
如果您在浏览器中打开它并切换到移动视图并查看控制台，您会收到此错误：
警告：文本内容不匹配。服务器：“仅在浏览器中呈现”客户端：“仅在移动设备上呈现”
发生这种情况是因为服务器的渲染检测到浏览器，而在客户端，他是一个移动设备。我发现的唯一解决方法是生成两者并使用如下 CSS：
.activeOnMobile {
@media screen and (min-width: 800px) {
display: none;
}
}
.activeOnDesktop {
@media screen …我用Next.js 9.3.1.
在带有 SSR 的旧应用程序中。我可以getInitialProps在 HOC 组件中运行（而不是在页面中），所以我可以从 HOC 组件和页面中的服务器获取数据。像这样https://gist.github.com/whoisryosuke/d034d3eaa0556e86349fb2634788a7a1
例子 ：
export default function withLayout(ComposedComponent) {
return class WithLayout extends Component {
static async getInitialProps(ctx) {
console.log('ctxlayout fire');
const { reduxStore, req } = ctx || {}
const isServer = !!req
reduxStore.dispatch(actions.serverRenderClock(isServer))
if (isServer) await reduxStore.dispatch(navigationActions.getListMenuAction('menu'));
// Check if Page has a `getInitialProps`; if so, call it.
const pageProps = ComposedComponent.getInitialProps && await ComposedComponent.getInitialProps(ctx);
// Return props.
return { ...pageProps }
}
render() {
return …static get server-side-rendering higher-order-components next.js
我正在使用 SSR 开发 Angular 应用程序，但在使用 构建时出现以下错误npm run build:ssr：
ERROR in [...]/tsconfig.json
[tsl] ERROR
TS6306: Referenced project '[...]/tsconfig.app.json' must have setting "composite": true.
ERROR in [...]/tsconfig.json
[tsl] ERROR
TS6306: Referenced project '[...]/tsconfig.server.json' must have setting "composite": true.
然后我尝试将此密钥添加到tsconfig.app.jsonand tsconfig.server.json，但我不确定在哪里添加此密钥：
tsconfig.app.json（以及相应的 tsconfig.server.json）
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"composite": true // <-- generates the next error (see below)
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
],
"composite": …我的问题是，我无法理解像 Next.js 这样的服务器端渲染单页面应用程序框架如何在前端接收预渲染的完整 HTML，而无需重写整个页面。例如，nextjs 网站声明如下：
默认情况下，Next.js 预渲染每个页面。这意味着 Next.js 提前为每个页面生成 HTML，而不是由客户端 JavaScript 完成这一切。预渲染可以带来更好的性能和 SEO。每个生成的 HTML 都与该页面所需的最少 JavaScript 代码相关联。当浏览器加载页面时，其 JavaScript 代码就会运行并使页面完全交互。（这个过程称为水合作用。）
我了解这如何增强 SPA 在首页加载时的响应能力。但在第一次加载之后，是什么让服务器端渲染与 SPA 兼容？我认为这是由于我无法理解的根本误解而产生的，因此我还有一些进一步的问题可能会帮助您理解它：
我对 SSR 与 SPA 兼容的原因有什么误解？
非常感谢所有解决这个问题的人！
single-page-application reactjs server-side-rendering next.js
当使用文件结构 app -> explore -> page.tsx 并使用以下代码获取搜索参数时：
export default function ExplorePage({ searchParams }: { searchParams: { search: string | undefined } }) {
const { search } = searchParams
我无法运行 npm run build。它给出了这个错误：
Type error: Page "app/explore/page.tsx" does not match the required types of a Next.js Page.
Invalid configuration:
The exported page component isn't correctly typed.
Expected "{ searchParams: { search: any; }; }", got "PageProps".
Invalid configuration:
Expected "{ search: any; }", got "Record<string, string | string[]> | undefined". …我正在尝试制作一个登录页面。在我的 page.tsx 文件上，我收到两个错误之一，具体取决于我是否包含“使用客户端”；在我的代码的顶部。如果我没有“使用客户端”；我收到此错误：
Error: React Context is unavailable in Server Components
如果我确实使用“使用客户端”；我收到此错误：
Error: [next-auth]: useSession must be wrapped in a <SessionProvider />
这是我的layout.tsx 文件：
import Image from 'next/image'
import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";
import React from 'react';
import "./globals.css";
import Link from "next/link";
type Props = {
children: ReactNode;
session: any;
};
export default function Layout({ children, session }: Props) {
return (
<html lang="en">
<head />
<body>
<div className="mx-auto">
<div className="flex flex-row …当服务器端呈现使用window或localStorage这些浏览器全局变量的React组件时,我总是需要添加
if (typeof localStorage !== 'undefined') { // then do stuff }
摆脱那些'localStorage is not defined'错误.
还有其他合适的解决方案吗？
编辑我的用例
window是为了它的属性innerwitdth,并添加原始的浏览器事件,如resizelocalStorage 是存储JWT令牌我是Next.js的新手,我正在使用jwt令牌与身份验证系统进行斗争.我想知道使用身份验证系统存储jwt令牌和路由的最佳/标准方法是什么.我一直在尝试不同的方法,从不同的教程/文章,但不太明白.这是我尝试过的.
当用户登录时,它会将用户名/密码发送到一个单独的 api服务器(例如处理后端内容的新项目),服务器将响应access-token,然后在Next.js项目中,我用接收到的令牌设置cookie.在Next.js项目中,受保护的路由将使用a withAuthhoc 进行包装,这将检查cookie中的令牌.这种方法的问题是它容易受到XSS的攻击,因为cookie没有httpOnly标志.
这类似于1.)但使用时localStorage,问题是access-token无法在第一次请求时发送到服务器.(这个我不确定,但根据我的理解,在每个http请求中,我必须access-token手动操作,那么我无法控制的请求呢？例如,首先请求或使用<a>标记).
我在Next.js服务器(自定义快速服务器)中编写了身份验证后端.用户登录时,服务器将对其进行验证,然后设置httpOnly cookie.然后问题是,使用客户端路由(使用Next.js路由器转到url),它无法检查令牌.例如,如果页面是使用withAuthhoc 包装的,但它无法使用javascript访问cookie中的令牌.
我见过很多人,在getInitialProps受保护的路由中,他们只检查cookie/localStorage中的存在令牌,然后如果令牌被撤销或列入黑名单,他们如何处理它,因为他们没有发送令牌给服务器？或者我是否必须在每个客户端页面更改时将令牌发送到服务器？
我在 SSR 应用程序的初始加载时收到此错误：Warning: Text content did not match. Server: "SOME DATA" Client: "Loading..."
如何在不将loading标志设置为 true 的情况下初始化应用程序的
客户端？
我正在使用 react、express 和 apollo 设置 SSR。我从渲染器服务器获得了一个正确渲染的 HTML 数据，但是当客户端包加载时，它试图重新获取数据。Hydration 已设置，并且来自渲染器服务器的所有数据都被注入到页面的 HTML 中。
/index.js
<Query query={GET_USERS} variables={queryVariables}>
{({
loading,
error,
data
}) => {
if (loading) return <p>Loading...</p>;
if (error) return `Error: ${error}`;
return data.users.map(user => <p key={user.id}>{user.login}</p>);
}}
</Query>
/renderer.js
export default async (req, client) => {
const serverSideApp = (
<ApolloProvider client={client}>
<StaticRouter location={req.path} context={{}}>
<div>{renderRoutes(RoutesList)}</div>
</StaticRouter>
</ApolloProvider>
);
return …