标签: server-rendering

我使用RR 3在服务器端渲染方面做了很多工作,所以我想看看它在v4的上下文中是如何工作的.我从网站上看了教程,但由于渲染现在与路由匹配一起发生,因此无法像以前那样实现预取数据.

以下是我用v3进行服务器渲染的方法:https: //github.com/alexnm/react-seed/blob/master/server/index.js

基于匹配函数,我将调用所有组件树中的所有预取函数,然后等待Promise.all它们完成,然后触发renderToString函数并返回html.

在RR4中,我们只有<ServerRouter>组件,因此我现在提供的解决方案是复制渲染代码:https: //github.com/FortechRomania/react-redux-complete-example/blob/master/src/server/index. JS

我还使用标签render上的函数<Match>来触发预取操作.它很丑陋,并在我想用预取数据呈现的页面的父组件中引入了各种依赖项.

我在这里错过了什么？有没有人为这种情况找到更好的解决方案？我还没有找到任何有用的东西.

尝试设置服务器端(通用,同构)呈现的应用程序,通过CircleCI使用Heroku为节点/ express应用程序部署,以及Cloudfront作为CDN.

我在概念化它如何工作方面遇到了一些麻烦.除了一些部分之外,这个流程看起来非常简单.一旦我们将构建的资产部署到像CloudFront这样的CDN,我们如何将它们连接到Heroku上的index.html文件？(此索引文件是构建的,并从Heroku节点应用程序提供,作为服务器端呈现的基础).但是我希望它包含到CDN资产的链接,而不是Heroku构建的资产.(CircleCi运行webpack,Heroku一旦部署就运行了)

有没有人遇到过这个？

我看过很多有关在有角度的通用应用程序中为客户端缓存数据的文章，因此它不会在服务器上已经解决的客户端上重复请求。

我只是不知道如何将数据从服务器传输到客户端。我是否将JSON注入预渲染的HTML或缺少其他内容？

我正在使用headless-gl在Node.js上运行webGL,在服务器上动态创建一个图像.一旦创建,在用户通过API再次访问图像之前,图像将存储在数据库(MongoDB)中.

下面是生成图像的部分:

var pixels = new Uint8Array(width * height * 4)
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)

然后将像素转换为base64(因为这似乎是客户端HTML中Image加载的推荐方式).

var base64Image = new Buffer(pixels, 'binary').toString('base64');

但是,此缓冲区生成的字符串无法解码以生成图像.可能是像素不是'二进制'类型？或者我应该将像素字符串保存在数据库中并尝试在客户端中逐个像素地重绘画布中的像素(我不认为这是最好的方法)？

我无法呈现 React 服务器端。我总是得到^

参考错误：文档未定义

var root = document.getElementById('root');

我知道节点不理解浏览器文档对象是怎么回事。但我似乎无法修复它。我在 webpack、服务器或 app.js 中做错了什么吗？

这是我的代码

服务器.js

import express from 'express';
import path from 'path';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './src/store/configureStore';
import routes from './src';

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

/**
 * React application route, supports server side rendering.
 */
app.get('/*', function(req, res) {
  // Create a context for <StaticRouter>, which …

我正在尝试将React-Select V2.0与Next.JS一起使用，但是在服务器加载时，select元素未设置样式，而闪烁设置了样式。

我尝试使用Next.JS的Emotion示例来渲染情感样式（https://github.com/zeit/next.js/tree/master/examples/with-emotion），但它似乎与Styled-JSX冲突我使用的错误StyleSheet: insertRule accepts only strings.

我尝试使用此处显示的Emotion babel配置选项：https : //github.com/emotion-js/emotion/blob/master/docs/configurable-imports.md#babel-options

但这会导致整个页面无法呈现样式，然后闪烁显示样式。

有谁知道如何在服务器渲染中使用Next.JS上的React-Select V2？

谢谢。

我有一个ExpressJS服务器,有时在初始渲染时呈现错误的用户数据.请参阅下面的(稍微简化)版本.

问题是该index.ejs文件经常在reduxState...中呈现错误的用户数据

我的困惑是因为我希望调用import { store } from 'routes.js'覆盖商店,就像{}每个用户的请求一样.问题似乎是,它store正在成为网站上每个用户组合在一起的组合商店.

如何确保每个用户只能看到他们在网站上的数据？

routes.js

// src/routes.js
import React from 'react';
import { createStore, applyMiddleware, compose } from "redux";
import routerConfig from "base/routes/routes";
import thunk from "redux-thunk";
import { rootReducer } from "base/reducers";

let initialState = {};

const store = createStore(
  rootReducer, initialState, compose(applyMiddleware(thunk))
);

const routes = routerConfig(store);

export {store};
export default routes;

server.js

import { store } from 'routes';

let getReduxPromise = (renderProps, …

我有一个在aspnet核心上运行的react-redux应用程序,使用aspnet prerendering进行服务器端渲染.

让我说我做了一个编程错误,在子组件中我试图访问一个未定义的道具因为一个愚蠢的错字.

import {Child} from './child'
export class Parent extends React.Component {
  render () {
    const someProp = {
      something: "something"
    };
    return <Child someProp={someProp} />;
  }
}

export class Child extends React.Component {
  render() {
    return <div>this.props.someprop.something</div>;
         //typo: should be someProp instead of someprop
}

没有服务器渲染我会得到一个类似于这样的错误:无法访问第x行的未定义的东西:yy但是使用serverrendering我得到一个:

处理请求时发生未处理的异常.

例外:调用节点模块失败并显示错误:由于"ClientApp/src/boot-server"中的启动功能返回了未解析或拒绝的承诺,因此预渲染在30000ms后超时.确保您的启动功能始终解析或拒绝其承诺.您可以使用'asp-prerender-timeout'标记帮助程序更改超时值.

这使得调试非常困难,当你没有得到任何关于出错的反馈.如果出现故障,任何人都知道如何设置拒绝？或者甚至可以调试服务器端呈现的代码？

这是我的启动服务器文件,告诉我你是否需要更多的文件.

import * as React from 'react';
import { Provider } from 'react-redux';
import { renderToString } from 'react-dom/server';
import configureStore from './store/configureStore';
import {getFormById} from './actions/getFormActions';
import {updateUserLocale} …

我只是想将我的 Angular 应用程序从版本 15 更新到 16。一切都适用于 Angular。即使它使角度通用构建也没有错误。但是当我尝试使用npm run serve:ssr它时会抛出错误

类型错误：“instanceof”的右侧不是对象

最初我认为这可能是我的代码中的一些错误，但我删除了整个代码并仅保留具有简单标题的应用程序组件。它仍然抛出同样的错误。

服务器.ts

import { enableProdMode } from "@angular/core";
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');
import 'zone.js/dist/zone-node';
const domino = require('domino');
const fs = require('fs');
const path = require('path');


import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { existsSync } from 'fs';
const dotenv = require('dotenv');
dotenv.config();
const distFolder = join(process.cwd(), 'dist/project-name/browser');
const template …