iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 29
0
Modern Web

Learning ASP.NET core + Angular2 系列 第 29

[ASP.NET Core X Angular2] Server side rendering for SEO

Introduction


We take great advantage of better UX and performance in SPA (Single Page Application), but dealing with SEO is a headache since SPA doesn’t perform well against the indexing of web crawler.

The best way for building a SEO friendly SPA is using server-side rendering.

In my previous article,
[ASP.NET Core X Angular2] Render MVC view in ng2 component

We can render a MVC view from server side in angular component, but honestly, this way has some integration issues and is not easy to maintain.

So we will use Angular Universal and Microsoft.AspNetCore.SpaServices to build a server-side-rendering single page app.

Angular Universal

Angular Universal does server-side rendering and serves the single pages as what they behave on the client side.

PS. There will be a chance (?) for integrating Angular Universal to Angular CLI, follow issues: #1050, #3013.

Here are some ways to use Angular Universal quickly,

  1. NodeJS :: Universal Starter repo
  2. ASP.NET Core :: Universal Starter repo
  3. Angular Universal CLI repo

Microsoft.AspNetCore.SpaServices

This package enables the following functions for building SPA with Angular2, React, Knockout… in ASP.NET Core.

1.Server-side rendering
2.Webpack dev middleware
3.Hot module replacement
4.Integrating server-side routing with client-side routing

Implement


Since it’s fairly complex to integrate Microsoft.AspNetCore.SpaServices and Angular Universal, there is a quick way to get started with Angular2 server-side rendering on ASP.NET Core: aspnetcore-spa generator.

Install

  • webpack
npm install -g webpack
  • aspnetcore-spa generator
npm install -g yo generator-aspnetcore-spa

Create New project

Under an empty folder, use the following command to create a new project.

yo aspnetcore-spa

And execute dotnet restore and npm install after the project is created.

PS. You can also create the SPA project by installing ASP.NET Core Template Pack extension.

Server side rendering

Okay, take a look the view-source of our previous non-server-side-rendering app in the browser.

And now we implement the same codes on the template generated from aspnetcore-spa generator. With Angular Universal and ASP.NET Core SPA Services, we have a server-side rendering app now!

Hot module replacement (Demo)

Summary


With Angular Universal, we can quickly build a SEO friendly Single page application with Angular2. Also Angular Universal will support more backend frameworks in the near future!

Angular Universal was originally built to work with a node.js back-end. There are adapters for most popular node.js server-side frameworks such as Express or Hapi.js. In addition to node.js, however, Angular Universal has ASP.NET Core support. In the near future we hope to add support for Java, PHP and Python. - From Angular Universal document

Reference


  1. Angular Universal
  2. angular/universal (Github)
  3. aspnet/JavaScriptServices
  4. Server-Side Rendering in Angular 2 with Angular Universal
  5. Angular 2, React, and Knockout apps on ASP.NET Core

上一篇
[Angular2] Redux with ngrx/store – Shopping cart sample (2)
下一篇
[Angular2] Deploy to Github-pages
系列文
Learning ASP.NET core + Angular2 31

尚未有邦友留言

立即登入留言