Skip to content

Commit 524d6af

Browse files
zllkjczllkjc
authored
feat: use server.useJsonScript instead ssr.inlineScript (#6625)
1 parent 30f89d5 commit 524d6af

File tree

23 files changed

+213
-80
lines changed

23 files changed

+213
-80
lines changed

‎.changeset/eleven-otters-cry.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@modern-js/runtime': patch
3+
'@modern-js/server-core': patch
4+
---
5+
6+
feat: add server.useJsonScript , for instead ssr.inlineScript
7+
feat: 添加 server.useJsonScript 配置，代替 ssr.inlineScript

‎packages/document/main-doc/docs/en/configure/app/server/ssr.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ When the value type is `Object`, the following properties can be configured:
2929
| ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
3030
| mode | `string` | `string` | which defaults to using `renderToString` for rendering. Configure `stream` to enable streaming rendering |
3131
| forceCSR | `boolean` | `false` | which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page |
32-
| inlineScript | `boolean` | `true` | By default, SSR data is injected into HTML as inline scripts and assigned directly to global variables. Configure `false` to distribute JSON instead of assigning to global variables, this configuration doesn't work in Streaming SSR |
3332
| disablePrerender | `boolean` | `fasle` | To ensure compatibility with the old data request method (`useLoader`), by default, Modern.js performs pre-rendering of components.However, if developers want to reduce one rendering when there is no use of the useLoader API in your project, you can set the configuration `disablePrerender=true` |
3433
| unsafeHeaders | `string[]` | `[]` | For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected |
3534
| scriptLoading | `defer \| blocking \| module \| async` | `defer` | The configuration is the same as [html.scriptLoading](/configure/app/html/script-loading), supporting SSR injected script set to `async` loading. The priority is `ssr.scriptLoading` > `html.scriptLoading` |
@@ -42,7 +41,6 @@ export default defineConfig({
4241
ssr: {
4342
forceCSR: true,
4443
mode: 'stream',
45-
inlineScript: false,
4644
unsafeHeaders: ['User-Agent'],
4745
scriptLoading: 'async',
4846
},

‎packages/document/main-doc/docs/zh/configure/app/server/ssr.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default defineConfig({
2929
| ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
3030
| mode | `string` | `string` | 默认为使用 `renderToString` 渲染。配置为 `stream` 开启流式渲染 |
3131
| forceCSR | `boolean` | `false` | 默认关闭强制 CSR 渲染。配置为 `true` 后，在页面访问时添加 `?csr=true` 或添加请求头 `x-modern-ssr-fallback` 即可强制 CSR |
32-
| inlineScript | `boolean` | `true` | 默认情况下，SSR 的数据会以内联脚本的方式注入到 HTML 中，并且直接赋值给全局变量。配置为 `false` 后，会下发 JSON，而不是赋值给全局变量，Streaming SSR 下，该配置不会生效 |
3332
| disablePrerender | `boolean` | `fasle` | 为了兼容旧数据请求方式 - `useLoader`, 默认情况下 Modern.js 会对组件进行一次预渲染即有两次渲染 |
3433
| unsafeHeaders | `string[]` | `[]` | 为了安全考虑，Modern.js 不会往 SSR_DATA 添加过多的内容。开发者可以通过该配置，对需要注入的 headers 进行配置 |
3534
| scriptLoading | `defer \| blocking \| module \| async` | `defer` | 配置同 [html.scriptLoading](/configure/app/html/script-loading)，支持 ssr 注入的 script 设置为 async 加载方式。优先级为 `ssr.scriptLoading` > `html.scriptLoading` |
@@ -42,7 +41,6 @@ export default defineConfig({
4241
ssr: {
4342
forceCSR: true,
4443
mode: 'stream',
45-
inlineScript: false,
4644
disablePrerender: true,
4745
unsafeHeaders: ['User-Agent'],
4846
scriptLoading: 'async',

‎packages/runtime/plugin-runtime/src/core/react/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function createRoot(UserApp?: React.ComponentType | null) {
99
const App = UserApp || getGlobalApp();
1010

1111
if (isBrowser()) {
12-
// we should get data from HTMLElement when set ssr.inlineScript = false
12+
// we should get data from HTMLElement when set server.useJsonScript = true
1313
window._SSR_DATA =
1414
window._SSR_DATA || parsedJSONFromElement(SSR_DATA_JSON_ID);
1515

‎packages/runtime/plugin-runtime/src/core/server/requestHandler.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { getGlobalRunner } from '../plugin/runner';
1616
import { createRoot } from '../react';
1717
import type { SSRServerContext } from '../types';
1818
import { CHUNK_CSS_PLACEHOLDER } from './constants';
19-
import { getSSRConfigByEntry, getSSRInlineScript, getSSRMode } from './utils';
19+
import { getSSRConfigByEntry, getSSRMode } from './utils';
2020

2121
export type { RequestHandlerConfig as HandleRequestConfig } from '@modern-js/app-tools';
2222

@@ -62,7 +62,7 @@ function createSSRContext(
6262
reporter,
6363
} = options;
6464

65-
const { nonce } = config;
65+
const { nonce, useJsonScript } = config;
6666

6767
const { entryName, route } = resource;
6868

@@ -100,15 +100,14 @@ function createSSRContext(
100100
config.ssr,
101101
config.ssrByEntries,
102102
);
103-
104103
const ssrMode = getSSRMode(ssrConfig);
105-
const inlineScript = getSSRInlineScript(ssrConfig);
106104

107105
const loaderFailureMode =
108106
typeof ssrConfig === 'object' ? ssrConfig.loaderFailureMode : undefined;
109107

110108
return {
111109
nonce,
110+
useJsonScript,
112111
loaderContext,
113112
redirection: {},
114113
htmlModifiers: [],
@@ -138,7 +137,6 @@ function createSSRContext(
138137
},
139138
reporter,
140139
mode: ssrMode,
141-
inlineScript,
142140
onError,
143141
onTiming,
144142
loaderFailureMode,

‎packages/runtime/plugin-runtime/src/core/server/stream/afterTemplate.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { SSRContainer } from '../../types';
66
import { SSR_DATA_PLACEHOLDER } from '../constants';
77
import type { HandleRequestConfig } from '../requestHandler';
88
import { type BuildHtmlCb, type SSRConfig, buildHtml } from '../shared';
9-
import { attributesToString, getSSRInlineScript, safeReplace } from '../utils';
9+
import { attributesToString, safeReplace } from '../utils';
1010

1111
export type BuildShellAfterTemplateOptions = {
1212
runtimeContext: RuntimeContext;
@@ -29,6 +29,7 @@ export function buildShellAfterTemplate(
2929
request,
3030
ssrConfig,
3131
nonce: config.nonce,
32+
useJsonScript: config.useJsonScript,
3233
runtimeContext,
3334
renderLevel,
3435
}),
@@ -62,9 +63,11 @@ function createReplaceSSRData(options: {
6263
runtimeContext: RuntimeContext;
6364
ssrConfig: SSRConfig;
6465
nonce?: string;
66+
useJsonScript?: boolean;
6567
renderLevel: RenderLevel;
6668
}) {
67-
const { runtimeContext, nonce, renderLevel, ssrConfig } = options;
69+
const { runtimeContext, nonce, renderLevel, useJsonScript, ssrConfig } =
70+
options;
6871

6972
const { request, reporter } = runtimeContext.ssrContext!;
7073

@@ -102,16 +105,11 @@ function createReplaceSSRData(options: {
102105
renderLevel,
103106
};
104107
const attrsStr = attributesToString({ nonce });
105-
106-
const inlineScript = getSSRInlineScript(ssrConfig);
107-
const useInlineScript = inlineScript !== false;
108108
const serializeSSRData = serializeJson(ssrData);
109109

110-
const ssrDataScript = useInlineScript
111-
? `
112-
<script${attrsStr}>window._SSR_DATA = ${serializeSSRData}</script>
113-
`
114-
: `<script type="application/json" id="${SSR_DATA_JSON_ID}">${serializeSSRData}</script>`;
110+
const ssrDataScript = useJsonScript
111+
? `<script type="application/json" id="${SSR_DATA_JSON_ID}">${serializeSSRData}</script>`
112+
: `<script${attrsStr}>window._SSR_DATA = ${serializeSSRData}</script>`;
115113

116114
return (template: string) =>
117115
safeReplace(template, SSR_DATA_PLACEHOLDER, ssrDataScript);

‎packages/runtime/plugin-runtime/src/core/server/string/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export const renderString: RenderString = async (
9696
chunkSet,
9797
routerContext,
9898
nonce: config.nonce,
99+
useJsonScript: config.useJsonScript,
99100
}),
100101
];
101102

‎packages/runtime/plugin-runtime/src/core/server/string/ssrData.ts‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,7 @@ import type { HeadersData } from '@modern-js/runtime-utils/universal/request';
44
import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from '../../constants';
55
import type { SSRContainer, SSRServerContext } from '../../types';
66
import type { SSRConfig } from '../shared';
7-
import {
8-
attributesToString,
9-
getSSRInlineScript,
10-
serializeErrors,
11-
} from '../utils';
7+
import { attributesToString, serializeErrors } from '../utils';
128
import type { ChunkSet, Collector } from './types';
139

1410
export interface SSRDataCreatorOptions {
@@ -19,6 +15,7 @@ export interface SSRDataCreatorOptions {
1915
ssrConfig?: SSRConfig;
2016
routerContext?: StaticHandlerContext;
2117
nonce?: string;
18+
useJsonScript?: boolean;
2219
}
2320

2421
export class SSRDataCollector implements Collector {
@@ -86,22 +83,19 @@ export class SSRDataCollector implements Collector {
8683
ssrData: Record<string, any>,
8784
routerData?: Record<string, any>,
8885
) {
89-
const { nonce, ssrConfig } = this.#options;
90-
const inlineScript = getSSRInlineScript(ssrConfig);
91-
92-
const useInlineScript = inlineScript !== false;
86+
const { nonce, useJsonScript = false } = this.#options;
9387
const serializeSSRData = serializeJson(ssrData);
9488
const attrsStr = attributesToString({ nonce });
9589

96-
let ssrDataScripts = useInlineScript
97-
? `<script${attrsStr}>window._SSR_DATA = ${serializeSSRData}</script>`
98-
: `<script type="application/json" id="${SSR_DATA_JSON_ID}">${serializeSSRData}</script>`;
90+
let ssrDataScripts = useJsonScript
91+
? `<script type="application/json" id="${SSR_DATA_JSON_ID}">${serializeSSRData}</script>`
92+
: `<script${attrsStr}>window._SSR_DATA = ${serializeSSRData}</script>`;
9993

10094
if (routerData) {
10195
const serializedRouterData = serializeJson(routerData);
102-
ssrDataScripts += useInlineScript
103-
? `\n<script${attrsStr}>window._ROUTER_DATA = ${serializedRouterData}</script>`
104-
: `\n<script type="application/json" id="${ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>`;
96+
ssrDataScripts += useJsonScript
97+
? `\n<script type="application/json" id="${ROUTER_DATA_JSON_ID}">${serializedRouterData}</script>`
98+
: `\n<script${attrsStr}>window._ROUTER_DATA = ${serializedRouterData}</script>`;
10599
}
106100
return ssrDataScripts;
107101
}

‎packages/runtime/plugin-runtime/src/core/server/utils.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,3 @@ export function getSSRMode(ssrConfig?: SSRConfig): 'string' | 'stream' | false {
7979

8080
return ssrConfig?.mode === 'stream' ? 'stream' : 'string';
8181
}
82-
83-
export function getSSRInlineScript(ssrConfig?: SSRConfig): boolean {
84-
if (typeof ssrConfig === 'object') {
85-
return ssrConfig.inlineScript === undefined ? true : ssrConfig.inlineScript;
86-
}
87-
88-
return true;
89-
}

‎packages/runtime/plugin-runtime/src/core/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export type SSRServerContext = Pick<
7070
loaderFailureMode?: 'clientRender' | 'errorBoundary';
7171
onError?: (e: unknown) => void;
7272
onTiming?: (name: string, dur: number) => void;
73-
inlineScript?: boolean;
73+
useJsonScript?: boolean;
7474
};
7575

7676
/* 通过 useRuntimeContext 获取的 SSRContext */

0 commit comments

Comments
 (0)