search keyword: 'Clean Code' break!!

[gracekrcx]

search keyword: 'Clean Code'

因為 input 裡的 empty string 到 Url encode 後，造成 state 持續的變化，持續發出 request
所以使用 router.events 的 shallow 判斷是否需要打 api

Shallow Routing
Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps, getStaticProps, and getInitialProps.

細節：
The URL will get updated to /?counter=10. and the page won't get replaced, only the state of the route is changed.

 router.push('/?counter=10', undefined, { shallow: true })

Url encode

空白 =>  +
+   =>  %2B
%2B =>  %252B