Ajax content, and noscript alternative- best practice?

I have a content listings page on a site I'm developing that uses ajax to pull items based on filtering picked by the user. (filter by date/ tag/ genre etc)

In order for the page to work for crawlbots and non-javascript users I have a standard listing of content as well, hidden, but with a noscript tag in the header making it display:block (Have been told this is okay in html5).

Trouble is- the site is doing everything twice now- loading the content via ajax as well as the alternative, 开发者_开发知识库only to be hidden with CSS.

I know for sure this isn't best practice, but I'm struggling to think of a solution where the content only loads once. Any thoughts on the matter would be greatly appreciated.

You could display them always with CSS, and then hide them with JS. (Without the use of noscript)