search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.92k stars 13.52k forks source link

Ionic 3/Angular 4: angular/platform-server, Angular Universal, server-side rendering, SEO #10699

Closed mikezks closed 7 years ago

mikezks commented 7 years ago

Ionic version:

I'm submitting a ...

Current behavior: No support for server-side rendering.

Expected behavior: Server-side rendering with angular/platform-server (previously Angular Universal) to optimize initial load time and make a PWA SEO-ready.

Other information:

@jgw96, you mentioned in your PWA blog post;

We are currently considering support for server-side rendering to get a blazing-fast first render and convenient hosting with the Ionic Cloud.

In the Ionic Framework Meeting Notes: 2017-03-06 is mentioned:

Ionic 3 coming together with Angular 4, improved start-up time via lazy loading pages

Could you please share your plans for server-side rendering support? Is there a chance to get this ready for 3.0 or later 3.x? Can you already estimate whether this may become available until beginning of Q3/2017?

Thanks a lot! Any insights to your roadmap help to plan projects based on Ionic.

NgYueHong commented 7 years ago

One more thing, a must have long waited feature: #5101 (Swipeable Tabs). Really hope to see it soon.

mikezks commented 7 years ago

@NgYueHong, thanks for supporting this issue, but please do only post comments related to this issue. Thanks.

mikezks commented 7 years ago

@Ionitron (and the rest of the Ionic Team 😃): It would also help to know your estimation on the complexity of implementing the server-side rendering feature. Is it comparable hard as the lazy loading feature?

Several Ionic users I talk to have this feature - together with lazy loading - on top of their wishlist. Mainly because of initial load performance and especially because of SEO. Every public service using Ionic has the need to be indexed properly by search engines, so all the new, brilliant PWA features for desktop and tablet use like Split Pane and Responsive Grid would benefit of server-side rendering support too.

Thanks for anything you share on this with us.

jgw96 commented 7 years ago

Hello everyone! Thanks for the feature request. Server-side rendering is not on our current dev schedule because lazy loading / code splitting gives a bigger boost to no only start up time but also time to interactive than server side rendering. We are still considering SSR support in the future, just not in an upcoming release. I'm going to move this issue over to our internal list of feature requests for now. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

jgw96 commented 7 years ago

This issue was moved to driftyco/ionic-feature-requests#125

mikezks commented 7 years ago

@jgw96, thanks for answering this, but I could not open the link to "ionic-feature-requests" (404; OK - just saw that you mentioned "internal list").

You are right, related to performance this is not as important as lazy loading (which I would rate as top prio as well).

If you think of publically available PWAs (e.g. an eCommerce platform) then SEO (not only performance) is a major issue. Without SSR SEO is almost impossible and therefore ionic can not be used for all these projects. I hope you will target this right after lazy loading is available with ionic 3.x.

Again, thanks a lot for all your work! 😃

awebdeveloper commented 7 years ago

Does it already support code splitting

bogomips commented 7 years ago

I did't understand if ionic 3 already suppors universal, but I actually think it is one of the most important thing to add. It would drastically improve the loading time when a user requests the first page and Ionic claims: "Performance obsessed" !

Also, it is the best way to get the app indexed form search engines.

mikezks commented 7 years ago

@danbucholtz: The Meeting Notes mention:

Working with Angular team on improving start-up performance

Is this related to this feature request - to SSR? Thanks.

danbucholtz commented 7 years ago

Hi, we haven't spent much time investigating SSR yet. At some point we certainly will. It's on the todo list, there are just lots of other things on the list too that are super important.

Thanks, Dan

mikezks commented 7 years ago

@danbucholtz, thanks for your update.

The current meeting notes mention:

Server Side Rendering (SSR) completed for Stencil

...which is assigned to @adamdbradley. Are there any further infos available on this?

Thanks, Michael

danbucholtz commented 7 years ago

@mikezks,

No, not yet. Stencil is something different that we have cooking up independent from ionic-angular right now.

Stencil will power ionic-angular 4 and up.

Thanks, Dan

mikezks commented 7 years ago

Everyone interested in the future of ionic and SSR + Lazy Loading should take a look at STENCIL: https://www.youtube.com/watch?v=UfD-k7aHkQE

Thanks for this big step forward, Ionic Team! 😄

tanogalego commented 7 years ago

Hey @mikezks, any clue on how to use Ionic + Stencil to allow a nice Facebook sharing through an Ionic PWA url ?

bogomips commented 7 years ago

Hello, any news here? I don't wanna be pushy and i totally understand the priority list, but developing a pwa is almost pointless if is not possible to get it indexed from search engines. Is there already a plane about it or something I can do to help? Thanks

kensodemann commented 7 years ago

As we get closer to the release of v4, more information will be published pertaining to the creation of PWAs, pre-rendering, suggested deployment practices, etc. Please stay tuned to the Ionic blog for details.

Gorniv commented 6 years ago

I try to create universal ionic https://github.com/Angular-RU/angular-universal-starter/tree/ionic , but I have a problem with providing Config. A few problem with build i resolved (https://github.com/ionic-team/ionic/pull/13464)

arpitrajpurohit12 commented 6 years ago

@Gorniv Your universal ionic worked?

Gorniv commented 6 years ago

@arpitrajpurohit12 no

arpitrajpurohit12 commented 6 years ago

@Gorniv Thanks for replying, May I know what are the issues you are facing? Is it able to do server side rendering?

Gorniv commented 6 years ago

@arpitrajpurohit12 - http://ionic-ssr.gorniv.com/ https://github.com/Angular-RU/angular-universal-starter/tree/ionic server error:

ERROR ReferenceError: Node is not defined
    at Menu.ngOnInit (/Users/Gorniv/GitHub/angular-universal-starter/server.js:113595:44)
    at checkAndUpdateDirectiveInline (/Users/Gorniv/GitHub/angular-universal-starter/server.js:12365:19)
    at checkAndUpdateNodeInline (/Users/Gorniv/GitHub/angular-universal-starter/server.js:13868:20)
    at checkAndUpdateNode (/Users/Gorniv/GitHub/angular-universal-starter/server.js:13811:16)
    at prodCheckAndUpdateNode (/Users/Gorniv/GitHub/angular-universal-starter/server.js:14514:5)
    at Object.updateDirectives (/Users/Gorniv/GitHub/angular-universal-starter/server.js:156131:3367)
    at Object.updateDirectives (/Users/Gorniv/GitHub/angular-universal-starter/server.js:14255:29)
    at checkAndUpdateView (/Users/Gorniv/GitHub/angular-universal-starter/server.js:13778:14)
    at callViewAction (/Users/Gorniv/GitHub/angular-universal-starter/server.js:14128:21)
    at execComponentViewsAction (/Users/Gorniv/GitHub/angular-universal-starter/server.js:14060:13)
ERROR { Error: StaticInjectorError[Config]:
  StaticInjectorError[Config]:
    NullInjectorError: No provider for Config!
    at _NullInjector.get (/Users/Gorniv/GitHub/angular-universal-starter/server.js:1193:19)
    at resolveToken (/Users/Gorniv/GitHub/angular-universal-starter/server.js:1481:24)
    at tryResolveToken (/Users/Gorniv/GitHub/angular-universal-starter/server.js:1423:16)
    at StaticInjector.get (/Users/Gorniv/GitHub/angular-universal-starter/server.js:1294:20)
    at resolveToken (/Users/Gorniv/GitHub/angular-universal-starter/server.js:1481:24)
    at tryResolveToken (/Users/Gorniv/GitHub/angular-universal-starter/server.js:1423:16)
    at StaticInjector.get (/Users/Gorniv/GitHub/angular-universal-starter/server.js:1294:20)
    at resolveNgModuleDep (/Users/Gorniv/GitHub/angular-universal-starter/server.js:10855:25)
    at NgModuleRef_.get (/Users/Gorniv/GitHub/angular-universal-starter/server.js:12076:16)
    at resolveDep (/Users/Gorniv/GitHub/angular-universal-starter/server.js:12572:45) ngTempTokenPath: null, ngTokenPath: [ [Function: Config] ] }

browser error:

core.js:1350 ERROR Error: Uncaught (in promise): TypeError: menuTypes[type] is not a constructor
TypeError: menuTypes[type] is not a constructor
    at Function.webpackJsonp.../../../../ionic-angular/components/app/menu-controller.js.MenuController.create (menu-controller.js:314)
    at Menu.webpackJsonp.../../../../ionic-angular/components/menu/menu.js.Menu._getType (menu.js:330)
    at menu.js:349
    at new ZoneAwarePromise (zone.js:890)
    at Menu.webpackJsonp.../../../../ionic-angular/components/menu/menu.js.Menu.setOpen (menu.js:347)
    at Menu.webpackJsonp.../../../../ionic-angular/components/menu/menu.js.Menu.toggle (menu.js:484)
    at MenuToggle.webpackJsonp.../../../../ionic-angular/components/menu/menu-toggle.js.MenuToggle.toggle (menu-toggle.js:104)
    at Object.handleEvent (home.ngfactory.ts:38)
    at handleEvent (core.js:13255)
    at callWithDebugContext (core.js:14740)
    at Function.webpackJsonp.../../../../ionic-angular/components/app/menu-controller.js.MenuController.create (menu-controller.js:314)
    at Menu.webpackJsonp.../../../../ionic-angular/components/menu/menu.js.Menu._getType (menu.js:330)
    at menu.js:349
    at new ZoneAwarePromise (zone.js:890)
    at Menu.webpackJsonp.../../../../ionic-angular/components/menu/menu.js.Menu.setOpen (menu.js:347)
    at Menu.webpackJsonp.../../../../ionic-angular/components/menu/menu.js.Menu.toggle (menu.js:484)
    at MenuToggle.webpackJsonp.../../../../ionic-angular/components/menu/menu-toggle.js.MenuToggle.toggle (menu-toggle.js:104)
    at Object.handleEvent (home.ngfactory.ts:38)
    at handleEvent (core.js:13255)
    at callWithDebugContext (core.js:14740)
    at resolvePromise (zone.js:824)
    at new ZoneAwarePromise (zone.js:893)
    at Menu.webpackJsonp.../../../../ionic-angular/components/menu/menu.js.Menu.setOpen (menu.js:347)
    at Menu.webpackJsonp.../../../../ionic-angular/components/menu/menu.js.Menu.toggle (menu.js:484)
    at MenuToggle.webpackJsonp.../../../../ionic-angular/components/menu/menu-toggle.js.MenuToggle.toggle (menu-toggle.js:104)
    at Object.handleEvent (home.ngfactory.ts:38)
    at handleEvent (core.js:13255)
    at callWithDebugContext (core.js:14740)
    at Object.debugHandleEvent [as handleEvent] (core.js:14327)
    at dispatchEvent (core.js:9704)
guzuomuse commented 6 years ago

@Gorniv,@arpitrajpurohit12,@kensodemann,@danbucholtz,@jgw96 will we plane to integrate server side rendering on the next version-- ionic v4? i search a lot ionic v4's ssr ,but can't confirm this feature. this blog said that v4 will integrate ssr, is it true? thanks.

vinicius91carvalho commented 6 years ago

First of all, sorry for my poor English.

After searching through Deep Web (joking), I found the solution. And the coolest solution was that I was able to integrate my Pioneer Ionic application with Firebase Hosting using Cloud Functions.

After reading the following topic:

https://github.com/firebase/firebase-tools/issues/33

The @TheRoccoB user explains how to host the static Web application in Firebase Hosting and redirect traffic from a URL to Cloud Functions.

What I did was map the routes that I have to index as:

{         "source": "/ shop / *",         "function": "ssr"       },       {         "source": "/ / promotions / **",         "function": "ssr"       }

Since "ssr" is the name of my function in Cloud Functions. So I used the library https://github.com/prerender/prerender-node to check if the request is from a google crowler, in case I redirect the request to a https://github.com/prerender/prerender server.

const prerender = express (); prerender.use (cors); prerender.use (     require ('prerender-node')     // .set ('prerenderServiceUrl', 'http: // localhost: 3000')     .set ('prerenderToken', ' TOKEN ') ); prerender.use (require ('prerender-node'). set ('beforeRender', function (req, done) {     // do you need to do?     console.log ('Rendering URL:', req.path); done (); })); prerender.use (require ('prerender-node') set ('afterRender', function (err, req, prerender_res) {     // do you need to do?     console.log (req.path + 'rendering completed!');     console.log ('Errors:', err); })); prerender.get ('*', (req, res) => {     console.log ('Calling function for URL:', req.path);     res.set ('Cache-Control', 'public, max-age = 300, s-maxage = 600');     res.status (200) .send (fs.readFileSync ('./ www / index.html'). toString ()); }); exports.ssr = functions.https.onRequest (prerender);

CheyenneForbes commented 6 years ago

Very needed feature, any updates?

cmer4 commented 6 years ago

I would agree to at least learn if there is a plan to support this in Ionic 4 release scope?

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.