render HTML and inject data for SPA #1490
-
|
I'm trying to render html with CSP 'nonce+{RNG}' in html Tag and on the scripts, stylesheets on SPA SolidJS app so searching for away to renderHtml with tags and option i need on each page reload. so when i add onRenderHtml to pages folder config I appreciate if someone could point me to right direction or what I'm doing wrong here , thanks in advance |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
Can you publish a reproduction for the error? (Although I don't think the error is related to what you're trying to achieve.) |
Beta Was this translation helpful? Give feedback.
-
|
1- setup a solid project import { ClientOnly } from "vike-solid/ClientOnly";
function Index() {
console.log("server side");
return (
<h1>
server side
<ClientOnly
fallback={<h1>...loading</h1>}
load={() => import("../App")}
children={(Item) => {
return <Item />;
}}
></ClientOnly>
</h1>
);
}
export default Index;5- add // https://vike.dev/onRenderHtml
import { renderToStream, renderToString } from "solid-js/web";
import { escapeInject } from "vike/server";
import App from "../pages/App";
import type { OnRenderHtmlAsync } from "vike/types";
import { createUniqueId } from "solid-js";
const onRenderHtml: OnRenderHtmlAsync = async (
pageContext,
): ReturnType<OnRenderHtmlAsync> => {
const { Page } = pageContext;
const stream = renderToStream(() => Page, {
nonce: "123",
renderId: createUniqueId(),
});
console.log(stream);
const doc = escapeInject`<!DOCTYPE html>
<html>
<head>
<style> .s{ background-color : red; }</style>
</head>
<body>
<div id="page-view">${stream}</div>
</body>
</html>`;
return doc;
};
export { onRenderHtml };6- add import type { Config } from "vike/types";
import vikeSolidConfig from "vike-solid/config";
import { onRenderHtml } from "../renderer/+onRenderHtml";
import { renderToStream, renderToString } from "solid-js/web";
import { escapeInject } from "vike/server";
export default {
extends: vikeSolidConfig,
clientRouting: true,
onRenderHtml: onRenderHtml,
} satisfies Config;
|
Beta Was this translation helpful? Give feedback.
-
|
Neat, please publish it as a GitHub repository I'll have a look at it then. As for your original question, let me know if you're still having issues. |
Beta Was this translation helpful? Give feedback.
-
|
oh sure , sorry I didn't know you want the repo https://github.com/lMINERl/general-reviewes and about my issue if you can point me what to do to have csp policy nonce-{RNG} on script tags and styles its from you and I'll be grateful |
Beta Was this translation helpful? Give feedback.
-
|
👍 I'll have a look at it later today.
One thing you could do is to manipulate the generated HTML |
Beta Was this translation helpful? Give feedback.
-
|
anything works XD thanks alot that will do |
Beta Was this translation helpful? Give feedback.
-
I'll do it after I'm done with my current PR. I guess it isn't a blocker, but let me know if it is. |
Beta Was this translation helpful? Give feedback.
-
|
Fixed & pre-released as |
Beta Was this translation helpful? Give feedback.
👍 I'll have a look at it later today.
One thing you could do is to manipulate the generated HTML
pageContext.httpResponse.bodyat yourrenderPage()server integration. Would that be an option for you?