mirror of
https://github.com/aspnet/JavaScriptServices.git
synced 2025-12-22 17:47:53 +00:00
Update prerendering docs to account for aspnet-prerendering 2.0.0 and the new createServerRenderer API. Fixes #479
This commit is contained in:
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user