Add simpler API for invoking prerendering without using tag helper #607

SteveSandersonMS · 2017-01-26T10:41:54Z

Although the asp-prerender-module tag helper is usually the most convenient and natural way to invoke prerendering, there are some cases where you'd want to do it from controller code, or from a code block in your Razor page. For example, you might want to receive back additional custom data values from prerendering, and then maybe use them to set the page title or similar. Or you might want to change how the globals values are serialized and delivered to the client.

Currently it is possible to do this by invoking Prerenderer.RenderToString directly. However it's inconvenient, because you have to duplicate some non-obvious logic from the tag helper. For example, to run prerendering from controller code, currently you need something like this:

var requestFeature = Request.HttpContext.Features.Get<IHttpRequestFeature>();
var unencodedPathAndQuery = requestFeature.RawTarget;
var unencodedAbsoluteUrl = $"{Request.Scheme}://{Request.Host}{unencodedPathAndQuery}";
var prerenderResult = await Prerenderer.RenderToString(
    hostEnv.ContentRootPath,
    nodeServices,
    new JavaScriptModuleExport("ClientApp/dist/main-server"),
    unencodedAbsoluteUrl,
    unencodedPathAndQuery,
    /* custom data parameter */ null,
    /* timeout milliseconds */ 15*1000,
    Request.PathBase.ToString()
);

ViewData["SpaHtml"] = prerenderResult.Html;
ViewData["Title"] = prerenderResult.Globals["pageTitle"];

We should consider migrating this logic out of PrerenderTagHelper and into some new DI service class that PrerenderTagHelper starts using. Then developers will be able to grab instances of that new service class and do custom prerendering much more easily. Ideally, you'd be able to do something like this directly in a Razor view:

@inject Microsoft.AspNetCore.SpaServices.Prerendering.IPrerenderer prerenderer
@{
    var prerenderResult = await prerenderer.RenderToString("ClientApp/dist/main-server");
}
...
<title>@prerenderResult.Globals["pageTitle"]</title>
<app>@Html.Raw(prerenderResult.Html)</app>

There could be an options param for overriding things like the request URL, timeout, etc., but by default it would use values from the context automatically like asp-prerender-module already does.

The text was updated successfully, but these errors were encountered:

MarkPieszak · 2017-01-26T13:55:11Z

Thank you for looking into this @SteveSandersonMS ! 💯 💯
It seemed like a change that would have to happen with the underlying Prerenderer, tried everything on my end with no luck.

Also for those wondering what the use-case for this is:

Since we're allowing .NET (MVC) to have control over the overall <html>, when we prerender applications through prerenderer.RenderToString, although we can pass variables through globals onto the window., we're still unable to effect the html that's output from the MVC View.

Being able to manipulate <title> and <meta> tags is crucial for SEO when it comes to server-rendered pages (ie: social-media deeplinking, link previews, etc)

Your example looks like it would be perfect for this!

@inject Microsoft.AspNetCore.SpaServices.Prerendering.IPrerenderer prerenderer
@{
    var prerenderResult = await prerenderer.RenderToString("ClientApp/dist/main-server");
}
...
<html>
  <head>
    <title>@prerenderResult.Globals["pageTitle"]</title>

    <!-- meta tags -->
    <meta name="description" content='@prerenderResult.Globals["meta"]["description"]'>
    <meta name="keywords" content='@prerenderResult.Globals["meta"]["keywords"]'>

    <!-- and so on, for the remaining meta / FB: / og: / twitter: meta tags -->
    <meta name="fb:app_id" content='@prerenderResult.Globals["meta"]["fb"]["appid"]'>

  </head>
  <body>
    <app>@Html.Raw(prerenderResult.Html)</app>
  </body>
</html>

One last question, would this be an alternative to the way we're currently doing things, or would all the templates need to be changed in this way? I feel that ideally they might as well all change, because eventually everyone will get to the point where they realize they need to update the Title / etc.

(On the Angular side) I have a way of extracting the title/meta data from the serialization, but I'm going to look into making it even easier & cleaner.

Ideally it'd be great to have Universal do something like this, I brought it up that normal meta manipulation won't work with .NET for the reasons above, so I'm hoping I can somehow convince them to add this in there.

    platform.serializeModule(AppModule)).then( result => {
        resolve({ 
           html: result.html, 
           globals: result.meta // <--
        });
    };

hheexx · 2017-02-22T13:47:40Z

@MarkPieszak Is there any reason not to switch to code you provided in last post?

Only thing that comes to my mind is asp-append-version attribute that is used for cache busting.

MarkPieszak · 2017-02-22T17:24:39Z

The code will actually be slightly similar to the above :)

Of course some of those APIs have changed in Angular 4.x since I wrote that, but so far I have it working, and am able to extract out styles (to be placed in the correct location), Title, and only place in the correct Html from the serialized application (instead of the entire <html><head>... etc)

We're still in beta, so I'm trying to work everything out and communicate back to the Core team to make sure everything works smoothly. II should be updating it in my repository once everything is ironed out more, I'm also going to eventually abstract out some of the logic so it's much cleaner in the boot-server file. I'd imagine I'll make a PR with the similar new APis here (to this repo) once 4.x officially lands.

We're getting there though! 😄 @hheexx

hheexx · 2017-02-22T21:21:50Z

Thanks @MarkPieszak ,
I'm willing to help if I can.
I have a finished website that is blocked by SEO. Sorry for making pressure but it's very urgent for me :)

I hope you can commit something around RC time :)

MarkPieszak · 2017-02-22T23:02:37Z

Not a problem totally understand!
You need Title & Meta tag support as well right?
If we can't get it within this repo, I'll at least have it within mine soon so you can patch your project with it. No worries 👍 @hheexx

HaraldMuehlhoffCC · 2017-03-02T14:36:22Z

Just on a side-note:

I'm using the code at the top of this thread in my HomeController.

I had to add

            var redirectUrl = prerenderResult.RedirectUrl;

            if (redirectUrl != null)
                return LocalRedirect(redirectUrl);

to make redirects in my react-router work:

        <Redirect from='/de/selbstbedienung' to='/de/distribution/selbstbedienung' />

I also had to add code to make the react-cookie work again:

(HomeController)

if (prerenderResult.Globals != null)
            {
                [...]
                ViewData["CookieData"] = prerenderResult.Globals["cookieData"];
            }

(Index.cshtml)

<script>
    window.cookieData = @Html.Raw(ViewData["CookieData"]);
</script>

<div id="react-app">@Html.Raw(ViewData["SpaHtml"])</div>

The code in boot-client (ReactReduxSPA) also doesn't take care of the cookie options, e.g. path.

NiceStepUp · 2017-06-05T10:36:35Z

I've developed an web application built using ASP.NET Core Web API and Angular 4. My module bundler is Web Pack 2.
So I cannot use this piece of code: ViewData["SpaHtml"] = prerenderResult.Html; from my controller. I do not have any cshtml views., so I cannot send data from controller to view through ViewData["SpaHtml"].

But I would like to use server side prerendering. I would like to add metatags into head:

import { Meta } from '@angular/platform-browser';

constructor(
    private metaService: Meta) {
}

let newText = "Foo data. This is test data!:)";
    //metatags to publish this page at social nets
    this.metaService.addTags([
        // Open Graph data
        { property: 'og:title', content: newText },
        { property: 'og:description', content: newText },        { 
        { property: "og:url", content: window.location.href },        
        { property: 'og:image', content: "http://usiter.com/uploads/20111118/zhivotnie+koshki+kartinka+s+malenkim+kotyonkom+35121656913.jpg" }]);

Is it possible to do without "ViewData"?`

hheexx · 2017-06-05T12:29:07Z

You receive rendered html string from node.js.
You can do whatever you want to it and you can return it directly from controller like:
return Content(htmlStr)

NiceStepUp · 2017-06-05T12:32:14Z

@hheexx ok, how can I add meta tags from controller to html page?

hheexx · 2017-06-05T13:20:41Z

html page is in a string so you need to find a way to find the right spot and insert meta in.

mryarbles · 2017-06-06T20:10:09Z

Why is this so poorly documented? I can't find anything online explaining exactly how to use Prerenderer directly except this github issue.

MarkPieszak · 2017-06-06T21:29:19Z

You can see an example of it in action here @mryarbles
https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/Server/Controllers/HomeController.cs

NiceStepUp · 2017-06-07T06:24:30Z

@hheexx I have a way to send data to plain html. And this data correctly is added to metatags:

import { Meta } from '@angular/platform-browser';

constructor(
private metaService: Meta) {
}

let newText = "Foo data. This is test data!:)";
//metatags to publish this page at social nets
this.metaService.addTags([
// Open Graph data
{ property: 'og:title', content: newText },
{ property: 'og:description', content: newText }, { 
{ property: "og:url", content: window.location.href }, 
{ property: 'og:image', content: "http://www.freeimageslive.co.uk/files
/images004/Italy_Venice_Canal_Grande.jpg" }]);

However, Search engines, Facebook, Twitter does not show my images when I try to post news at Facebook, Twitter or other social nets. I've explored why it happens and the reason is that SEO does not run JavaScript code. So when I post I do not see images.

I cannot use tag helper and ViewData as I've created ASP.NET Core Web API project and I do not have any ".cshtml" page.

SteveSandersonMS · 2017-07-03T13:19:44Z

There's now a new API for this. It looks extremely similar to the proposal in this issue. Sample usage: 94fc84a#diff-ac9fabb76766dea5d503c5a5387e88e4

Further docs will come later. This will be included in version 2.0.0 of the SpaServices package.

SteveSandersonMS mentioned this issue Jan 26, 2017

Allow custom values from JS to be returned from renderToString in SpaServices #384

Closed

This was referenced Jan 26, 2017

Angular Universal Roadmap for Angular 4.0 angular/angular#13822

Closed

[feature] Pass title & meta tags data from app to ViewData to generate SEO tags TrilonIO/aspnetcore-angular-universal#57

Closed

SteveSandersonMS mentioned this issue Jan 31, 2017

open graph meta tags is inserted inside of the body. #629

Closed

derricksimpson mentioned this issue Feb 21, 2017

Angular 2.4.5 template nested html/head/body duplicates #662

Closed

SteveSandersonMS mentioned this issue Mar 7, 2017

Using asp-prerender-module with Office 365 Fabric and React #711

Closed

SteveSandersonMS mentioned this issue Mar 29, 2017

To use server side prerendering at runtime to produce entire HTML documents, not involving Razor at all. #811

Closed

SteveSandersonMS mentioned this issue Jun 5, 2017

Using @addTagHelper in ASP.NET Core WebAPI #1002

Closed

SteveSandersonMS closed this as completed in 94fc84a Jul 3, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add simpler API for invoking prerendering without using tag helper #607

Add simpler API for invoking prerendering without using tag helper #607

SteveSandersonMS commented Jan 26, 2017 •

edited

Loading

MarkPieszak commented Jan 26, 2017

hheexx commented Feb 22, 2017

MarkPieszak commented Feb 22, 2017 •

edited

Loading

hheexx commented Feb 22, 2017

MarkPieszak commented Feb 22, 2017

HaraldMuehlhoffCC commented Mar 2, 2017 •

edited

Loading

NiceStepUp commented Jun 5, 2017 •

edited

Loading

hheexx commented Jun 5, 2017

NiceStepUp commented Jun 5, 2017

hheexx commented Jun 5, 2017

mryarbles commented Jun 6, 2017

MarkPieszak commented Jun 6, 2017

NiceStepUp commented Jun 7, 2017 •

edited

Loading

SteveSandersonMS commented Jul 3, 2017

Add simpler API for invoking prerendering without using tag helper #607

Add simpler API for invoking prerendering without using tag helper #607

Comments

SteveSandersonMS commented Jan 26, 2017 • edited Loading

MarkPieszak commented Jan 26, 2017

hheexx commented Feb 22, 2017

MarkPieszak commented Feb 22, 2017 • edited Loading

hheexx commented Feb 22, 2017

MarkPieszak commented Feb 22, 2017

HaraldMuehlhoffCC commented Mar 2, 2017 • edited Loading

NiceStepUp commented Jun 5, 2017 • edited Loading

hheexx commented Jun 5, 2017

NiceStepUp commented Jun 5, 2017

hheexx commented Jun 5, 2017

mryarbles commented Jun 6, 2017

MarkPieszak commented Jun 6, 2017

NiceStepUp commented Jun 7, 2017 • edited Loading

SteveSandersonMS commented Jul 3, 2017

SteveSandersonMS commented Jan 26, 2017 •

edited

Loading

MarkPieszak commented Feb 22, 2017 •

edited

Loading

HaraldMuehlhoffCC commented Mar 2, 2017 •

edited

Loading

NiceStepUp commented Jun 5, 2017 •

edited

Loading

NiceStepUp commented Jun 7, 2017 •

edited

Loading