标签: server-side-rendering

当服务器端呈现使用window或localStorage这些浏览器全局变量的React组件时,我总是需要添加

if (typeof localStorage !== 'undefined') { // then do stuff }

摆脱那些'localStorage is not defined'错误.

还有其他合适的解决方案吗？

编辑我的用例

1. window是为了它的属性innerwitdth,并添加原始的浏览器事件,如resize
2. localStorage 是存储JWT令牌

我在 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 …

我正在构建下一个项目的打字稿。如果我将此配置文件保留为next.config.js，我会收到一条警告tsconfig.json“未找到 next.config.ts”。所以 tsconfig.json 上有警告标志{}。

如果我将扩展名更改为.ts，当我启动项目时，我会收到以下错误：

“错误：不支持通过‘next.config.ts’配置 Next.js。请将该文件替换为‘next.config.js’。”

我很困惑，我不知道该怎么办。

ts.config.json

{ 
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "sourceMap": true,
    "removeComments": true,

    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

下一个.config.ts

const path = require("path");
const Dotenv = require("dotenv-webpack");

module.exports = {
  env: …

我是 flutter 新手，我想为我的 flutter web 应用程序实现 SSR。Flutter web支持SSR（服务器端渲染）吗？我应该如何实施？

我正在尝试在某个事件中重新验证我网站的所有页面，

我遇到的问题是我必须一页一页地做：

...
try {
 await res.unstable_revalidate(
  `/`
 );
 await res.unstable_revalidate(
  `/about`
 ;
 await res.unstable_revalidate(
  `/shop`
 );
 ...
 return res.json({ revalidated: true });
} catch (err) {
   return res.status(500).send('Error revalidating');
  }

所以我的问题是：有没有一种方法可以按需（使用unstable_revalidate()）重新验证我网站的所有页面，或者我是否必须逐页进行？

我想WordPress基于开发主题/插件React.为了使搜索引擎友好,我需要在服务器上初始化它(服务器端渲染).

只有这样,才能做到这一点,据我所知,是使用反应-PHP-v8js,这就要求PECL V8js扩展.这是一个问题,因为我无法控制将运行这些主题/插件的平台.

有没有办法制作React和WordPress合作,而无需安装额外的扩展？也许通过构建/编译React文件PHP？

我使用 ASP.Net Core React+Redux 开发 SPA Web 应用程序。

更新到 .Net Core 3.0 后，我发现 UseWebpackDevMiddleware 和 AddNodeServices 已过时。

我学习了新的项目模板 React+Redux，但它没有使用 webpack 或 SSR。

1) 在哪里可以找到在 .Net Core 3.0 中使用 webpack 的示例或信息？使用 UseWebpackDevMiddleware 真的很容易配置 HMR 和 webpack 构建。

2) 在哪里可以找到有关使用 .Net 3.0 + React 的 SSR 的示例或信息？

我正在使用 next.js 样式组件的全局样式，每次我重新加载我的页面时，我都能看到字体闪烁。

我有我的字体文件 public/fonts/Inconsolata

我在频谱聊天中到处寻找，next.js github问题，但似乎找不到任何解决方案。

页面/index.js

import styled from 'styled-components';

const H1 = styled.h1`
  font-family: 'Inconsolata Bold';
  font-weight: 700;
  color: #000;
`;

const index = () => {
  return (
    <div>
      <H1>font flashes</H1>
    </div>
  );
};

export default index;

页面/_app.js

import App from 'next/app';
import React from 'react';

import GlobalStyle from '../src/style/globalStyle';

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <GlobalStyle />
        <Component {...pageProps} />
      </>
    ); …

请帮我解决问题：在此处输入图片描述

成功构建并在具有角度通用的浏览器上运行后，我遇到了这个问题

这是我的包 json ：

{
  "name": "ssr",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "10.0.5",
    "@angular/cdk": "10.1.0",
    "@angular/common": "10.0.5",
    "@angular/compiler": "10.0.5",
    "@angular/core": "10.0.5",
    "@angular/fire": "^6.0.2",
    "@angular/forms": "10.0.5",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^10.0.5",
    "@angular/material": "10.1.0",
    "@angular/material-moment-adapter": "10.1.0",
    "@angular/platform-browser": "10.0.5",
    "@angular/platform-browser-dynamic": "10.0.5",
    "@angular/platform-server": "^10.0.5",
    "@angular/router": "10.0.5",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@ng-toolkit/universal": "^8.1.0",
    "@nguniversal/express-engine": "^10.0.1",
    "@types/jquery": "^3.5.1",
    "@types/node": "^8.10.62",
    "angular-in-memory-web-api": "^0.11.0",
    "angular-ng-autocomplete": "^2.0.1",
    "classlist.js": "^1.1.20150312",
    "codelyzer": "^6.0.0",
    "core-js": "2.6.9",
    "crypto-js": "^3.3.0",
    "express": "^4.15.2",
    "firebase": "^7.17.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "localstorage-polyfill": "^1.0.1",
    "moment": "2.24.0",
    "ng2-slim-loading-bar": …

我正在使用 Next.js 和react-dates构建一个应用程序。

我有两个组件DateRangePicker组件和DayPickerRangeController组件。

当窗口的宽度大于1180px时，我想渲染DateRangePicker，如果尺寸小于这个，我想渲染DayPickerRangeController。

这是代码：

      windowSize > 1180 ?
           <DateRangePicker
             startDatePlaceholderText="Start"
             startDate={startDate}
             startDateId="startDate"
             onDatesChange={handleOnDateChange}
             endDate={endDate}
             endDateId="endDate"
             focusedInput={focus}
             transitionDuration={0}
             onFocusChange={(focusedInput) => {
               if (!focusedInput) {
                 setFocus("startDate")
               } else {
                 setFocus(focusedInput)
                }
               }}
                /> :
             <DayPickerRangeController
               isOutsideRange={day => isInclusivelyBeforeDay(day, moment().add(-1, 'days'))}
               startDate={startDate}
               onDatesChange={handleOnDateChange}
               endDate={endDate}
               focusedInput={focus}
               onFocusChange={(focusedInput) => {
               if (!focusedInput) {
                 setFocus("startDate")
                 } else {
                  setFocus(focusedInput)
                 }
               }}
              /> 
          }

我通常使用反应钩与窗口对象检测窗口屏幕宽度像这

但是我发现ssr的时候这种方式是不可用的，因为ssr渲染没有window对象。

无论ssr如何，是否有另一种方法可以安全地获得窗口大小？