标签: server-side-rendering
在React服务器端组件中设置<script>的内容
我有这个组件：
export class Demo extends React.Component<DemoProps, any> {
private foo: number;
constructor(props: DemoProps) {
super(props);
}
render() {
return (
<html>
<head>
<script>
// I would like to add an inline script here
</script>
</head>
<body>
<div id="root">
(hello world)
</div>
<div>
<progress id="hot-reload-progress-bar" value="100" max="100"></progress>
</div>
</body>
</html>
)
}
}
如何在<script></script>标签内添加内联脚本？
如果尝试这个：
getScript() {
const config = JSON.stringify({
env: process.env.NODE_ENV
});
return 'define(\"@config\", [], function () {' +
' return ' + config +';' +
'});' …推荐指数
解决办法
查看次数
使用 Next.js 进行砖石布局
我正在开发一个多页面网站，前端使用 Next.js，后端使用 Strapi。在博客页面上，数据是从数据库动态获取的。我正在尝试使用 Masonry 以自适应布局显示这些数据。
我遇到的问题是，在第一次加载时，页面在单个垂直列中显示每个网格项。重新加载时，砌体布局就会生效，但有一些重叠的项目。第二次重新加载时，所有内容都会正确显示，甚至可以响应。但是，如果我离开该页面并返回，则会回到第一个方块。
这是博客页面的代码：
import React from 'react';
import Layout from '../components/StaticLayout';
import Link from 'next/link';
import fetch from 'isomorphic-unfetch';
import '../../static/styles.min.css';
let Masonry = '';
export default class Blog extends React.Component {
constructor(props) {
super(props);
this.state = {
appIsMounted: false
}
}
static async getInitialProps() {
const res = await fetch('http://localhost:1337/blogposts');
const data = await res.json();
return {
posts: data
};
}
async componentDidMount() {
let masonry = await import('masonry-layout');
this.setState({
appIsMounted: true
})
}
render() …推荐指数
解决办法
查看次数
如何使用React（next.js）SSR两遍渲染来防止父组件重新渲染？
所以我有一个使用 Next.js 的 SSR 应用程序。我使用的是利用 WEB API 的第 3 方组件，因此需要将其加载到客户端而不是服务器上。我正在使用“两遍”渲染来完成此操作，我在这里阅读了相关内容： https: //itnext.io/tips-for-server-side-rendering-with-react-e42b1b7acd57
我试图弄清楚为什么当 next.js 页面中的“ssrDone”状态发生变化时，整个<Layout>组件会不必要地重新渲染，其中包括页面的页眉、页脚等。
我已经阅读了有关React.memo()利用的内容shouldComponentUpdate()，但我似乎无法阻止它重新渲染组件<Layout>。
我的 console.log 消息触发<Layout>两次，但<ThirdPartyComponent>控制台消息按预期触发一次。这是一个问题吗，还是 React 足够聪明，不会实际更新 DOM，所以我什至不应该担心这个。无缘无故地让它重新渲染我的页眉和页脚似乎很愚蠢。
在控制台中，输出为：
Layout rendered
Layout rendered
3rd party component rendered
index.js（下一个.js 页面）
import React from "react";
import Layout from "../components/Layout";
import ThirdPartyComponent from "../components/ThirdPartyComponent";
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
ssrDone: false
};
}
componentDidMount() {
this.setState({ ssrDone: true });
}
render() …推荐指数
解决办法
查看次数
Nuxt：如何在服务器端动态添加内容/脚本到头部
如何在服务器端的 Nuxt 中动态添加内容到头部？
我试图在这里重写这个模块，它只支持静态 ID： https: //github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/index.js
（我的 ID 来自商店（商店正在从休息呼叫中获取 ID））
这是将内容添加到头部的函数：
export default function addheadcode(head, id) {
const options = {
id: id,
layer: 'dataLayer',
pageTracking: true,
pageViewEventName: 'nuxtRoute',
respectDoNotTrack: false,
query: {},
scriptURL: '//www.googletagmanager.com/gtm.js',
noscriptURL: '//www.googletagmanager.com/ns.html',
env: {} // env is supported for backward compability and is alias of query
}
const queryParams = Object.assign({}, options.env, options.query)
queryParams.id = options.id
if (options.layer) {
queryParams.l = options.layer
}
const queryString = Object.keys(queryParams)
.filter(key => queryParams[key] !== null && queryParams[key] …推荐指数
解决办法
查看次数
NextJS + React Router - 部分 SSR 应用程序
我想制作部分 SSR Web 应用程序并寻找最佳解决方案。我需要用于 SEO 的 SSR，并且它只会提供动态渲染的产品页面 - 这将由 NextJS 处理。
应用程序的其他部分仅适用于登录用户，我不希望任何未登录的人意外显示它（但只有用户数据必须是安全的，如果有人通过黑客访问那些没有任何用户数据的受限页面，那也没关系）-对于这一部分，我已经实现了带有适当重定向和少量路由的 React Router（它也使用 Redux）。
整个项目是用 create-react-app 制作的。有没有办法轻松地将这两种功能结合起来？我必须将所有内容从 /src 移至 /pages 吗？也许最好的方法是独立为它们提供服务，然后使用 Apache 配置重定向到其中一个或另一个？
推荐指数
解决办法
查看次数
Next.js 服务器端 api 调用返回 500 内部服务器错误
我终于开始涉足使用Next.js的服务器端 React 世界，但是我对这个问题感到非常困惑。
我正在使用以下方式调用pages/customer-preferences.tsxAPIisomorphic-unfetch
CustomerPreferencesPage.getInitialProps = async () => {
const res = await fetch(API_URL + '/preference-customer');
const initialData = await res.json();
return { initialData };
};
一切都可以在本地模式下正常工作dev，或者一旦构建并运行build> start。为了托管它，我从 docker 容器运行它node:10，当我在本地运行它时，一切都很好。该问题仅在部署后才会发生。
当我导航到/然后单击链接时/customer-preferences，所有作品均按预期进行。但是，如果我刷新页面或直接加载页面，/customer-preferences我会从 Next.js 看到此错误
因此，该问题似乎仅在尝试从服务器而不是客户端进行 API 调用时才会发生。
我还设置了一个简单的快速服务器来代替使用，但不确定这是否有必要？！
const express = require('express');
const next = require('next');
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ …推荐指数
解决办法
查看次数
将 Flask 与 Nuxtjs 结合进行 SSR
我正在开发一个通用应用程序，前端和后端分离，使用 Flask 作为 API，Nuxtjs 作为前端。在尝试 Nuxtjs 之前，我只使用 vuejs (SPA)，但后来我意识到它没有针对 SEO 进行优化。无论如何，我能够在使用构建模式（静态和index.html）时使用生成的dist 文件。我可以使用以下代码来处理它：
app = Flask(__name__, template_folder = "../frontend/dist")
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
@app.route('/static/js/<filename>')
def send_js(filename):
filename = str(filename)
return send_from_directory('../frontend/dist/static/js', filename)
@app.route('/static/css/<filename>')
def send_css(filename):
filename = str(filename)
return send_from_directory('../frontend/dist/static/css', filename)
@app.route('/static/fonts/<filename>')
def send_img(filename):
filename = str(filename)
return send_from_directory('../frontend/dist/static/fonts', filename)
@app.route('/static/img/<filename>')
def send_statics(filename):
filename = str(filename)
return send_from_directory('../frontend/dist/static/img', filename)
@app.route('/statics/icons/<filename>')
def send_icons(filename):
filename = str(filename)
return send_from_directory('../frontend/dist/static/statics/icons', filename)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return render_template("index.html")
然而，当我开始使用Nuxtjs时，构建模式生成不同的文件（没有index.html，没有静态文件夹），我不知道如何处理它。您可以在下面的屏幕截图中找到它生成的内容： 生成的文件
推荐指数
解决办法
查看次数
使用 api 中的 id 获取数据，但在地址栏显示替代文本，例如 Next.js 中的 content_title
我使用的 api 只允许使用id获取数据 ，但不允许 使用标题，如下所示http://0.0.0.0:5000/blog/13b03a39-bc04-4604-baf6-059658f9f5e8。端点返回一个 JSON 对象，我想使用 Next Js 将其渲染到浏览器。但是我想要一个干净的 url 架构，其中包含标题，如下所示：
而不是包含 id 的 url，如下所示：
这是我要传递的props方式Link：
<Link
href={`/post/${post.blog_title}`}
as={`/post/${post.blog_title}`}>
<a className='blog__card--link'>
<h4 className='blog__card--title'>{post.blog_title}</h4>
</a>
</Link>
这是我的[id].js文件：
import { getBlog } from '../../api/index';
const Article = ({ blog }) => {
const router = useRouter();
return (
<div class='article'>
<div class='article__main'>
{/* {console.log(router)} */}
<ArticleView />
</div>
</div>
);
};
Article.getInitialProps = async (router) => {
const res …推荐指数
解决办法
查看次数
带数据获取的 SSR，没有状态管理库
我正在尝试制作一个 SSR 反应应用程序，但无法将道具从 express 传递到组件。我在做什么错误？
服务器.js
import AppPage2 from './src/project02/LandingPage';
......
......
server.get('/project2',async (req,res)=>{
const context = {data:'test'}
const sheet = new ServerStyleSheet();
const content = ReactDOMServer.renderToString(sheet.collectStyles(
<StaticRouter location={req.url} context={context}>
<AppPage2 state={{"foo":"baar"}}/>
</StaticRouter>)
);
const styles = sheet.getStyleTags();
let html = appShell( 'Project 2', content,' project2.bundle.js',styles)
res.status(200).send(html);
res.end()
})
AppPage2(./src/project02/LandingPage)
import React from 'react';
import {Wrapper,Title} from './styleComponent/testStylePage'
.......
.......
class AppPage extends React.Component {
componentDidMount() {
console.log("{{API}}",this,this.props, this.props.staticContext)
}
render(){
return(
<Wrapper>
<Title>This is project 01 </Title>
</Wrapper>
) …javascript reactjs react-router isomorphic-javascript server-side-rendering
推荐指数
解决办法
查看次数
如何关闭 Next.js 中的 CSS 模块功能？
Next.js 只允许在 _App.js 中导入全局 CSS。但是我们不能在每个组件中导入全局 CSS，因为我们必须按照 Next.js 的限制使用 CSS 模块。
现在我正在将一个大型项目迁移到 Next.js，并且将每个模块的 css 转换为 CSS 模块非常困难。有什么办法可以解除这个限制吗？
限制文档链接： https : //nextjs.org/docs/messages/css-global
推荐指数
解决办法
查看次数