标签: server-side-rendering

如何修复错误:react ssr graphql 中仅支持绝对 URL

我正在使用 apollo 设置服务器端渲染以在服务器端设置 graphql,但我现在不知道当我尝试在一个组件中使用查询时遇到这个问题时,这个错误出现在 cli 中:

(node:4440) UnhandledPromiseRejectionWarning: Error: Network error: Only absolute URLs are supported
at new ApolloError (G:\Project\node_modules\apollo-client\bundle.umd.js:59:32)
    at QueryManager.<anonymous> (G:\Project\node_modules\apollo-client\bundle.umd.js:13:49)
Run Code Online (Sandbox Code Playgroud)

如果你现在发生了什么,请告诉我。

服务器代码

import React  from 'react'
import routes from '../../client/Routes'

import {StaticRouter} from 'react-router-dom'
import {Provider} from 'react-redux'
import {renderRoutes} from 'react-router-config'
import {AES} from 'crypto-js';
import {Helmet} from "react-helmet";
import serialize from 'serialize-javascript' ;

import  ApolloClient from 'apollo-client';
import { ApolloProvider, renderToStringWithData  } from 'react-apollo';
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloLink } from …
Run Code Online (Sandbox Code Playgroud)

node.js apollo reactjs redux server-side-rendering

5
推荐指数
1
解决办法
2万
查看次数

Next-Redux-Wrapper 不更新 SSR Store

我正在开发一个使用 SSR 的应用程序。它基于 React、Next 和 Redux。我了解拥有客户端存储和服务器端存储并使它们彼此同步的一般概念。

我正在使用 next-redux-wrapper 但似乎无法让服务器端存储来维护它的状态。

_app.js

// pages/_app.js
import React from 'react'
import {Provider} from "react-redux";
import App, {Container} from "next/app";
import withRedux from "next-redux-wrapper";
import makeStore from "../state/index.js";

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {

        // we can dispatch from here too
        // ctx.store.dispatch({type: 'FOO', payload: 'foo'});

        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

        return {pageProps};

    }

    render() {
        const {Component, pageProps, store} = this.props;
        return (
            <Container>
                <Provider store={store}> …
Run Code Online (Sandbox Code Playgroud)

reactjs server-side-rendering react-redux next.js next-redux-wrapper

5
推荐指数
1
解决办法
1389
查看次数

Angular Universal 应用不断加载问题

我正准备使用 Angular Universal 为我的 Angular 7 应用程序设置 SSR。我遵循了官方文档(https://angular.io/guide/universal)。我到了需要跑的地方npm run build:ssr && npm run serve:ssr。之后我在终端中看到:Node Express server listening on http://localhost:4000. 终端和浏览器都没有错误。页面一直在加载。

有任何想法吗?

server-side-rendering angular-universal angular angular7

5
推荐指数
1
解决办法
645
查看次数

在 SSR React-TypeScript 应用程序中正确使用 MiniCssExtractPlugin

我有一个基于 Webpack 4 的 SSR React-TypeScript 应用程序,我对每个 React 组件使用 SCSS。我使用了两个 Webpack 配置文件,一个用于客户端包,一个用于服务器包。

我对如何使用 MiniCssExtractPlugin 在客户端 Webpack 配置上加载我的 SCSS 感到困惑。该文档不是很有帮助。很明显,这个规则在模块内部是必要的:

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader"
    ]
}
Run Code Online (Sandbox Code Playgroud)

但不清楚应该放哪个文件:

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[hash].css',
        chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
],
Run Code Online (Sandbox Code Playgroud)

我的 SCSS 文件遍布整个应用程序:每个 React 组件都有自己的 SCSS 文件。我不知道如何将这些文件传递给 MiniCssExtractPlugin。

对于服务器 Webpack 配置,我有以下内容来加载我的 SCSS 文件,但我不知道它是否足够:

{
    test: /\.scss$/,
    use: ["css-loader", "sass-loader"]
}
Run Code Online (Sandbox Code Playgroud)

如果可能的话,我很想看到类似应用程序的实际工作示例。

我的 css 文件由 MiniCSS 生成:

.home {
  text-align: center; …
Run Code Online (Sandbox Code Playgroud)

sass typescript reactjs webpack server-side-rendering

5
推荐指数
0
解决办法
1332
查看次数

Webpack 向带有导出的模块添加“不提供导出”

我正在尝试为我的 React 应用程序设置 SSR。我在我的应用程序中使用来自 NPM 包(私有)的组件。该应用程序使用 Apollo Client,并发出 GraphQL 请求。有问题的模块是一个简单的apollo-link-state模块,如果用户登录,则返回,否则执行更改。该应用程序使用动态加载loadable。问题是我所有的链接状态模块都正常工作,除了用户模块。我检查了 webpack 构建文件,这就是我得到的:

/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "../my-package/node_modules/@babel/runtime/regenerator/index.js");
/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
Object.defineProperty(exports, "__esModule", {
 value: true
});

exports.typeDefs = exports.defaults = exports.resolvers = undefined;

//Do my processing here (using apolloClient for async mutations )

exports.default = {
 resolvers: resolvers,
 defaults: defaults,
 typeDefs: typeDefs …
Run Code Online (Sandbox Code Playgroud)

reactjs webpack babeljs graphql server-side-rendering

5
推荐指数
1
解决办法
1687
查看次数

如何在 next.js 中使用 firebase 的 firestore/admin sdk

我正在使用 firebase 和 next.js 构建应用程序

我对这个设置相当陌生,对 SSR 完全陌生,firebase 文档让我感到困惑。

目前,我正在使用 firebase 函数来运行 next.js,这就像一个魅力。但是现在,我想使用firestore。根据文档,我看到了两种在我的项目中使用它的方法(如果我做对了)。第一个是“网络”解决方案,它对我没有好处,因为我相信它不是 SSR,而我的应用程序的全部意义就在于此。

另一个是“node.js”解决方案,它在 firebase 函数上运行,这对我来说更有意义。我无法弄清楚的部分是将它与 Next.js 一起使用

在我当前的设置中,我正在将我的 next.js 应用程序构建函数文件夹中,在函数文件夹中,我可以引用我使用“node.js”解决方案创建的 databaseref 对象,但是如何构建我的下一个应用程序之前引用它? 那么当我不在函数文件夹中时?

设置:

- src
  - utils
  - pages
    - index.js
    - signin.js
    - // etc.
- functions 
  - next // this is the output folder of my 'src' build
  - index.js 
  - // etc.
Run Code Online (Sandbox Code Playgroud)

在里面functions/index.js我可以做:

- src
  - utils
  - pages
    - index.js
    - signin.js
    - // etc. …
Run Code Online (Sandbox Code Playgroud)

firebase reactjs server-side-rendering firebase-admin next.js

5
推荐指数
1
解决办法
1768
查看次数

错误:在 angular firebase 通用中找不到模块“require("./server/main")”

这是 cmd npm run serve 上的错误:ssr

 I'm getting the error 'Can't find module 'require("./server/main") while hit the command "npm run server:ssr".
    but "npm run build:ssr" execute successfully.
    Please Help anyone.

    PS C:\Users\DELL\ion\portfolio\portfolio> npm run serve:ssr

    > portfolio@0.0.0 serve:ssr C:\Users\DELL\ion\portfolio\portfolio
    > node dist/server

    internal/modules/cjs/loader.js:628
        throw err;
        ^

    Error: Cannot find module 'require("./server/main")'
    Require stack:
    - C:\Users\DELL\ion\portfolio\portfolio\dist\server.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
        at Function.Module._load (internal/modules/cjs/loader.js:527:27)
        at Module.require (internal/modules/cjs/loader.js:683:19)
        at require (internal/modules/cjs/helpers.js:16:16)
        at webpackUniversalModuleDefinition 
        (C:\Users\DELL\ion\portfolio\portfolio\dist\server.js:3:28)
        at Object.<anonymous> 
        (C:\Users\DELL\ion\portfolio\portfolio\dist\server.js:10:3)
        at Module._compile (internal/modules/cjs/loader.js:776:30)
        at Object.Module._extensions..js 
       (internal/modules/cjs/loader.js:787:10)
        at …
Run Code Online (Sandbox Code Playgroud)

angularfire server-side-rendering angular-universal angular8

5
推荐指数
1
解决办法
2485
查看次数

Angular Firebase 函数部署错误:找不到模块“firebase/app”

我在我的 Angular Firebase 项目中添加了 SSR 并设置了 WPA。并且它成功地部署在 Firebase(托管和功能)上。但是下次我在组件中编辑了一些代码。在那之后,我正在重新部署。firebase 托管已成功部署。但函数显示错误。

我在 package.json 中使用了 Angular 8 和所有最新的 npm 包,我还更新并重建了我的项目。在 localhost:5000 上一切正常。

我得到的错误:加载用户代码时函数失败。错误消息:无法加载文件 lib/index.js 中的代码。

     Detailed stack trace: Error: Cannot find module 'firebase/app'
     at Function.Module._resolveFilename (module.js:548:15)
     at Function.Module._load (module.js:475:25)
     at Module.require (module.js:597:17)
     at require (internal/module.js:11:18)
     at webpackUniversalModuleDefinition (/srv/dist/server.js:3:28)
     at Object.<anonymous> (/srv/dist/server.js:10:3)
     at Module._compile (module.js:653:30)
     at Object.Module._extensions..js (module.js:664:10)
     at Module.load (module.js:566:32)
     at tryModuleLoad (module.js:506:12)
Run Code Online (Sandbox Code Playgroud)

和 package.json

  "node": "8"
  },
  "main": "lib/index.js",
  "dependencies": {
  "@firebase/app": "^0.4.15",
  "firebase-admin": "^8.0.0",
  "firebase-functions": "^3.1.0"
   },
   "devDependencies": {
   "tslint": "^5.12.0", …
Run Code Online (Sandbox Code Playgroud)

firebase server-side-rendering angular angular-cli-v8

5
推荐指数
1
解决办法
1024
查看次数

服务器端渲染(Next.js)和静态站点渲染(Gatsby.js)有什么区别?

我希望创建一个不依赖客户端 JavaScript 的网站,但是,我仍然想使用客户端路由等 SPA 功能,因此我正在考虑使用不在客户端上呈现的框架 -边。这两个似乎是此类事情的首选,但是,我不确定这两种不同类型的服务器处理之间的差异。

node.js reactjs server-side-rendering gatsby next.js

5
推荐指数
1
解决办法
325
查看次数

来自 react-i18next 的 initialI18nStore 来自哪里

我希望有更多关于 react-i18next 的 useSSR 的文档。在文档中,它声明要构建一个这样的组件......

import React from 'react';
import { useSSR } from 'react-i18next';

export function InitSSR({ initialI18nStore, initialLanguage }) {
  useSSR(initialI18nStore, initialLanguage);

  return <App />
}
Run Code Online (Sandbox Code Playgroud)

问题是它没有显示 initialI18nStore 道具的来源。我得到initialLanguage 将是类似'es'、'en'、'etc',但我只是不确定initialI18nStore 来自哪里。那是来自中间件还是 I18nextProvider?

reactjs server-side-rendering react-i18next

5
推荐指数
1
解决办法
653
查看次数