Update prerendering docs to account for aspnet-prerendering 2.0.0 and the new createServerRenderer API. Fixes #479

This commit is contained in:
SteveSandersonMS
2016-12-01 14:41:48 +00:00
parent dc130adc91
commit 2b2465ad2e

View File

@@ -48,11 +48,14 @@ Instead, what `SpaServices` offers is ASP.NET Core APIs that know how to invoke
### 1. Enable the asp-prerender-* tag helpers
Make sure you've installed the `Microsoft.AspNetCore.SpaServices` NuGet package and the `aspnet-prerendering` NPM package. Together these contain the server-side and client-side library code you'll need.
Make sure you've installed into your project:
Now go to your `Views/_ViewImports.cshtml` file, and add the following line:
* The `Microsoft.AspNetCore.SpaServices` NuGet package, version 1.1.0-* or later
* The `aspnet-prerendering` NPM package, version 2.0.1 or later
@addTagHelper *, Microsoft.AspNetCore.SpaServices
Together these contain the server-side and client-side library code you'll need. Now go to your `Views/_ViewImports.cshtml` file, and add the following line:
@addTagHelper "*, Microsoft.AspNetCore.SpaServices"
### 2. Use asp-prerender-* in a view
@@ -67,7 +70,9 @@ If you run your application now, and browse to whatever page renders the view yo
Create a JavaScript file at the path matching the `asp-prerender-module` value you specified above. In this example, that means creating a folder called `ClientApp` at the root of your project, and creating a file inside it called `boot-server.js`. Try putting the following into it:
```javascript
module.exports = function(params) {
var prerendering = require('aspnet-prerendering');
module.exports = prerendering.createServerRenderer(function(params) {
return new Promise(function (resolve, reject) {
var result = '<h1>Hello world!</h1>'
+ '<p>Current time in Node is: ' + new Date() + '</p>'
@@ -76,7 +81,7 @@ module.exports = function(params) {
resolve({ html: result });
});
};
});
```
If you try running your app now, you should see the HTML snippet generated by your JavaScript getting injected into your page.
@@ -98,7 +103,9 @@ For example, in your `cshtml`,
Now in your JavaScript prerendering function, you can access this data by reading `params.data`, e.g.:
```javascript
module.exports = function(params) {
var prerendering = require('aspnet-prerendering');
module.exports = prerendering.createServerRenderer(function(params) {
return new Promise(function (resolve, reject) {
var result = '<h1>Hello world!</h1>'
+ '<p>Is gold user: ' + params.data.isGoldUser + '</p>'
@@ -106,7 +113,7 @@ module.exports = function(params) {
resolve({ html: result });
});
};
});
```
Notice that the property names are received in JavaScript-style casing (e.g., `isGoldUser`) even though they were sent in C#-style casing (e.g., `IsGoldUser`). This is because of how the JSON serialization is configured by default.
@@ -182,7 +189,9 @@ If you don't already have a `tsconfig.json` file at the root of your project, ad
Now you can delete `ClientApp/boot-server.js`, and in its place, create `ClientApp/boot-server.ts`, containing the TypeScript equivalent of what you had before:
```javascript
export default function (params: any): Promise<{ html: string}> {
import { createServerRenderer } from 'aspnet-prerendering';
export default createServerRenderer(params => {
return new Promise((resolve, reject) => {
const html = `
<h1>Hello world!</h1>
@@ -192,7 +201,7 @@ export default function (params: any): Promise<{ html: string}> {
resolve({ html });
});
}
});
```
Finally, run `webpack` on the command line to build `ClientApp/dist/main-server.js`. Then you can tell `SpaServices` to use that file for server-side prerendering. In your MVC view where you use `aspnet-prerender-module`, update the attribute value: