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
}
線上資源
- Create AMP Pages
- How to use AMP in Next.js
- What is Next.js and how you can build an AMP page with it?
- Gatsby vs Next.JS
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