angular / universal

Server-side rendering and Prerendering for Angular
MIT License
4.04k stars 483 forks source link

Prerender page static #2009

Closed EasySystemSoft closed 3 years ago

EasySystemSoft commented 3 years ago

The proposal would be to load static page through universal angular without the need for a cdn, similar to Next.js or Gatsby.

This code I tried it brings me the static page if it does not exist but it re-executes angular on the server Archive server.ts

    let html=indexHtml;
    const fullPath = join(distFolder, req.originalUrl);
    if (existsSync(fullPath)) {
      console.log('STATIC Exists');
      html=fullPath;
  }
      res.render(html, {
        req,
        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
      });

If I change for this I get an error (Cannot Get /)

    const fullPath = join(distFolder, req.originalUrl);
    if (existsSync(fullPath)) {
      console.log('STATIC Exists');
     res.sendFile(join(distFolder, req.originalUrl));
    } else {
      console.log('DINAMIC');
      res.render(indexHtml, {
        req,
        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
      });
    }
alan-agius4 commented 3 years ago

Which version of Angular universal are you using? Since 11.2 this is supported out of the box.

Side note: res.render will cause the view to be re-rendered, you need to use res.send instead.

Closing since this tracker is not suitable for support request.

EasySystemSoft commented 3 years ago

Thank you very much in version 11.2.0 it works

There is a way that dynamic pages that are not pre-rendered, can be pre-rendered in production so that the next time they request it, it is already cached, looking at Nexjs.

https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation [https://nextjs.org/static/twitter-cards/documentation.png]https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation Basic Features: Data Fetching | Next.jshttps://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.. export async function getStaticProps (context) {return {props: {}, // will be passed to the page component as props}}. The context parameter is an object containing the following keys:. params contains the route parameters for pages ... nextjs.org

angular-automatic-lock-bot[bot] commented 3 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.