AMP前端架構

AMP主要概念理想

AMP HTML: 簡化版的HTML讓網頁更快的呈現出來。
AMP Cache: Google和Bing會先cache好AMP在他們的伺服器上，讓尋找結果更快顯示。
在手機環境page load速度會提高
Google SEO排名會提高

支持AMP的React.js架構

架構	HTML建立時刻	需要server?	適合使用網頁
Next.js	Real Time	需要	比較複雜或多網頁時
Gatsby.js	Build Time	不需	比較小的網頁，blogs

如何在Next.js架構裡實作AMP

雖然Next.js是個React.js的架構，當你用AMP時你的網頁就不可能是client side React了，因為兩個網頁的理念是完全衝突的。
當你用Next.js來顯示AMP網頁，Next.js已經比較像server side templating engine，而不是React前端component了。
Next.js提供兩種建立AMP網頁的方式。

Hybrid AMP

pages/home.js

import { useAmp } from 'next/amp'

export const config = {
  amp: 'hybrid'
}

export default () => {
  const isAmp = useAmp()
  return (
    <div>
      <p>{isAmp ? 'Not AMP Home Page' : 'Home Page'}</p>
    </div>
   )
}

AMP-only

pages/index.js

import Nav from '../components/nav'
import { useAmp } from 'next/amp'

export const config = {
  amp: true
}

線上資源

AMP及CSS的一些結合問題

CSS imports is non-standard behavior in AMP,
Linking external CSS files is not even supported in AMP, they’d have to be inlined.
AMP has restrictions on the amount of CSS that can be sent which are very restrictive so CSS imports will send too much CSS in general.

Styled-JSX Webpack Loader

github: styled-jsx
We bundle styled-jsx to provide support for isolated scoped CSS.
The aim is to support “shadow CSS” similar to Web Components, which unfortunately do not support server-rendering and are JS-only.
You can use the styled-jsx Webpack loader to import external CSS in AMP mode for now.
You just have to be careful to not go over the 50,000 bytes limit for styles in AMP.

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

CSS-in-JS

It’s possible to use any existing CSS-in-JS solution. The simplest one is inline styles:

function HiThere() {
  return <p style=>hi there</p>
}

export default HiThere

To use more sophisticated CSS-in-JS solutions, you typically have to implement style flushing for server-side rendering. We enable this by allowing you to define your own custom <Document> component that wraps each page.

Importing CSS / Sass / Less / Stylus files

To support importing .css, .scss, .less or .styl files you can use these modules, which configure sensible defaults for server rendered applications.
- @zeit/next-css
- @zeit/next-sass
- @zeit/next-less
- @zeit/next-stylus