[Feature Request] - Add an SPA View Engine that gives the ability to render the entire page instead of using Razor #1514

New Issue

fergalmoran · 2025-08-09T17:20:25Z

fergalmoran commented

2025-08-09 17:20:25 +00:00

Originally created by @AustinWinstanley on 7/14/2016

For example in React with Webpack, an entire page can be rendered with the Html React component looking something like this:

Html.js

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom/server';
import Helmet from 'react-helmet';
import serialize from 'serialize-javascript';

const head = Helmet.rewind();

const Html = ({ component, store }) => {
    const _content = component ? ReactDOM.renderToString(component) : '';

    return (
        <html lang="en-us">
            <head>
                {head.base.toComponent()}
                {head.title.toComponent()}
                {head.meta.toComponent()}
                {head.link.toComponent()}
                {head.script.toComponent()}
                <link rel="shortcut icon" href="/favicon.ico" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
            </head>
            <body>
                <div id="content" dangerouslySetInnerHTML={{ __html: _content }} />
                <script dangerouslySetInnerHTML={{ __html: `window.__data=${serialize(store.getState())};` }} />
                <script src="/dist/client.generated.js" />
            </body>
        </html>
    );
};

Html.propTypes = {
    component: PropTypes.node,
    store: PropTypes.object
};

export default Html;

Currently, it looks like the Razor view engine requires a layout and partial page.

It's possible to get around this somewhat by setting IgnoreBody() at the top of the _Layout and a placeholder view, but then you have to workaround the view by returning View("index", model) every time.

_Layout.cshtml

@{
    IgnoreBody();
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
</head>
<body>
    <div
        id="content"
        asp-prerender-module="Public/Server"
        asp-prerender-webpack-config="webpack.config.js"
        asp-prerender-data="@Model">
    </div>
</body>
</html>

Index.cshtml

@*
    // View Placeholder
*@

Controller

public IActionResult MyView()
{
    return View("Index", new MyViewModel());
}

The routing is handled by React Router.

This way works, but it seems like a lot of extra effort if a view engine could be created that could server the entire page, skipping Razor entirely.

*Originally created by @AustinWinstanley on 7/14/2016* For example in React with Webpack, an entire page can be rendered with the Html React component looking something like this: **Html.js** ``` import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom/server'; import Helmet from 'react-helmet'; import serialize from 'serialize-javascript'; const head = Helmet.rewind(); const Html = ({ component, store }) => { const _content = component ? ReactDOM.renderToString(component) : ''; return ( <html lang="en-us"> <head> {head.base.toComponent()} {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} {head.script.toComponent()} <link rel="shortcut icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <div id="content" dangerouslySetInnerHTML={{ __html: _content }} /> <script dangerouslySetInnerHTML={{ __html: `window.__data=${serialize(store.getState())};` }} /> <script src="/dist/client.generated.js" /> </body> </html> ); }; Html.propTypes = { component: PropTypes.node, store: PropTypes.object }; export default Html; ``` Currently, it looks like the Razor view engine requires a layout and partial page. It's possible to get around this somewhat by setting `IgnoreBody()` at the top of the _Layout and a placeholder view, but then you have to workaround the view by returning `View("index", model)` every time. **_Layout.cshtml** ``` @{ IgnoreBody(); } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello World</title> </head> <body> <div id="content" asp-prerender-module="Public/Server" asp-prerender-webpack-config="webpack.config.js" asp-prerender-data="@Model"> </div> </body> </html> ``` **Index.cshtml** ``` @* // View Placeholder *@ ``` **Controller** ``` public IActionResult MyView() { return View("Index", new MyViewModel()); } ``` The routing is handled by React Router. This way works, but it seems like a lot of extra effort if a view engine could be created that could server the entire page, skipping Razor entirely.

fergalmoran closed this issue

2025-08-09 17:20:25 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1514