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="proxy.php?url=https%3A%2F%2Fgithub.com%2Ffavicon.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="proxy.php?url=https%3A%2F%2Fgithub.com%2Fdist%2Fclient.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.
For example in React with Webpack, an entire page can be rendered with the Html React component looking something like this:
Html.js
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 returningView("index", model)every time._Layout.cshtml
Index.cshtml
Controller
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.